6

当我尝试在这样的 chrome 打包应用程序中使用Storage类时，window.localStorage它会返回null. 不过，在 Dartium 或 Chrome 中启动时，下面的代码可以正常工作。为什么 localstorage 在包应用程序中不起作用？我会写什么来获得以下功能？

import 'dart:json';

void save(List data) {
  var jsonString = stringify(data);
  window.localStorage['highscore'] = jsonString;
}

List load() {
  var jsonString = window.localStorage['highscore'];
  return parse(jsonString);
}
4

1 回答 1

8

根据chrome 打包应用程序 API 文档，您不能使用window.localStorage，但可以使用chrome.storage来获取具有类似功能（以及更多功能）的 API。

您还需要在清单中请求存储权限：

...
"permissions": [
    "storage"
],

看一下pubchrome包，它应该提供对 Dart 中 chrome.* API 的访问（当你在你的 pubspec 中导入它时。你对Dartchrome.storage库特别感兴趣。

下面的使用示例（通过使用 Dart 编辑器新应用程序中的 Chrome 打包应用程序选项）...：

import 'dart:html';

import 'package:js/js.dart' as js;
import 'package:chrome/chrome.dart' as chrome;


void main() {
  print("Starting...");
  query("button").onClick.listen(onClick);
}


onClick(e) {
  document.body.append(new Element.html("<p>Clicked...</p>"));
  // save the highscore 123
  chrome.storage.local.set({'highscore':'123'}).then((storageArea) {

    // load the highscore
    chrome.storage.local.get(['highscore']).then((Map<String,String> vals) {
      var highscore = vals['highscore'];
      document.body.append(new Element.html("<p>$highscore</p>"));
    });

  });
}

使用如下所示的 HTML：

...snip
<button>Click Me</button>
<script src="storage.dart" type="application/dart"></script>

<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
<script src="packages/js/dart_interop.js"></script>
...

以及如下所示的清单：

{
  "name": "StorageExample",
  "version": "1",

  "manifest_version": 2,

  "icons": {"128": "dart_icon.png"},

  "permissions" : [
    "storage"
  ],

  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

我没有在 Dartium 中测试过它，但是转换为 JS 并作为打包应用程序加载到 Chrome v28 中工作正常。

于 2013-07-26T07:12:02.270 回答