Question

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

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);
}

Answer 1

根据chrome packaged app API documentation，您无法使用window.localStorage，但可以使用chrome.storage来获取具有相似功能的API（以及更多内容）。

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

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

请查看the chrome pub package，它应该可以在Dart中提供对chrome。* API的访问权限（当您在pubspec中导入它时。您对the chrome.storage Dart library特别感兴趣。

以下使用示例（使用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中工作正常。

使用Dart在Chrome应用中进行本地存储

1 个答案: