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

Question

当我尝试在这样的chrome打包应用程序中使用Storage类时,window.localStorage它会返回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打包的应用程序API文档,您无法使用,window.localStorage但您可以使用它chrome.storage来获取具有类似功能的API(以及更多).

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

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

看一下pub包,该chrome包应该提供对Dart中的chrome.*API的访问(当你在pubspec中导入它时.你对chrome.storageDart库特别感兴趣.

下面的使用示例(通过使用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中工作正常.