谷歌浏览器扩展程序：本地存储。

Question

我正在开发一个Google Chrome的扩展程序，遇到了一些问题。我创建了一个options.html页面，并将其添加到manifest.json文件中。该页面可以正确显示。

我保存了选项，然后返回扩展程序应运行的页面。

不幸的是，选项的本地存储返回一个“null”，而不是选项。如果我直接从扩展程序的JS脚本设置本地存储选项，则可以正常工作，但如果从选项页面设置，则无法正常工作。

有没有办法从我的JavaScript文件中访问options.html本地存储值？

- Rohan

---

那你是怎么修复它的？我遇到了同样的问题。options.html 使用了 localStorage，但内容脚本只知道网站的 localStorage，而 background.js 的 localStorage 是空的... - Rudie

我已经使用新的存储API修复了它：https://developer.chrome.com/extensions/storage.html - Rudie

此时，您应该在Chrome扩展中使用chrome.storage，而不是localStorage，除非您特别打算使用内容脚本与特定网站的localStorage进行交互。 - Makyen

Answer 1

你可以使用以下任一方式进行设置：

localStorage["var"]=data;

或者

localStorage.var=data;

使用以下方式加载它们

var myvar = localStorage.var;

你可以在这里阅读有关API的信息。

- leegeorg07

---

真的吗？它对我总是有效，也许只是暂时的问题？ 但至少现在它可以工作了。 - leegeorg07

嗨Rohan，我也遇到了同样的问题，你能否请发布解决方案？ - Pankaj Khurana

Answer 2

正确的方法是：

if (typeof(localStorage) == ‘undefined’ ) {
  alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’);
}
else {
  try {
    localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value”
  }
  catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
      alert(‘Quota exceeded!’); //data wasn’t successfully saved due to quota exceed so throw an error
    }
  }
  document.write(localStorage.getItem(“name”)); //Hello World!
  localStorage.removeItem(“name”); //deletes the matching item from the database
}

参考：http://html5tutorial.net/tutorials/working-with-html5-localstorage.html

本文主要讲解如何使用HTML5中的本地存储（LocalStorage）来存储和获取数据。LocalStorage是在客户端（浏览器）上存储数据的一种方式，不需要向服务器发送请求即可访问这些数据。LocalStorage支持存储字符串类型的数据，并提供了setItem()和getItem()方法来进行数据的存储和获取。通过使用LocalStorage，用户可以方便地在浏览器中保存和读取数据，而无需担心数据丢失问题。

- DJ'

---

是的，这是JavaScript访问localStorage的坚固方式，但是任何支持扩展的Chrome版本都支持localStorage，所以这是多余的。 - Jason