Chrome浏览器扩展 - 本地存储无法正常工作

我正在编写一个Chrome扩展程序，它使用内容脚本来修改网站的某些部分。内容脚本工作正常，直到我试图将选项页面添加到我的扩展。Chrome浏览器扩展 - 本地存储无法正常工作

现在我使用的是options.html文件来保存用户的喜好来本地存储，你可以在这里看到：

<html> 
    <head><title>Options</title></head> 
     <script type="text/javascript"> 

     function save_options() { 
      var select = document.getElementById("width"); 
      var width = select.children[select.selectedIndex].value; 
      localStorage["site_width"] = width; 
     } 

     function restore_options() { 
      var fwidth = localStorage["site_width"]; 
      if (!fwidth) { 
      return; 
      } 
      var select = document.getElementById("width"); 
      for (var i = 0; i < select.children.length; i++) { 
      var child = select.children[i]; 
      if (child.value == fwidth) { 
       child.selected = "true"; 
       break; 
      } 
      } 
     } 

     </script> 

    <body onload="restore_options()"> 

    Width: 
     <select id="width"> 
      <option value="100%">100%</option> 
      <option value="90%">90%</option> 
      <option value="80%">80%</option> 
      <option value="70%">70%</option> 
     </select> 

     <br> 
     <button onclick="save_options()">Save</button> 
    </body> 
</html>

我也有一个background.html文件来处理内容之间的通信脚本和localStorage的：

<html> 
    <script type="text/javascript"> 

     chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
      if (request.method == "siteWidth") 
       sendResponse({status: localStorage["site_width"]}); 
      else 
       sendResponse({}); 
     }); 

    </script> 
</html>

然后有实际内容的脚本，看起来像这样：

var Width; 

chrome.extension.sendRequest({method: "siteWidth"}, function(response) { 
     width = response.status; 
    });

没有任何代码实际工作。它看起来很稳固，但我不是一个非常有经验的程序员，所以我可能是错的。

难道有人可以用通俗的话来解释本地存储吗？

来源

2011-03-16 Bjarki Jonasson

要了解localStorage如何工作并详细了解Complete details about LocalStorage是您开始使用的良好来源。只是为了补充，我会给你一个可能帮助你的例子。这是options.html

<html> 
<head> 
<script type='text/javscript'> 
function save_options() { 
    if(document.getElementById("x").checked == true){localStorage['x_en'] = 1;} 
    if(document.getElementById("x").checked == false){localStorage['x_en'] = 0;} 
} 

function restore_options() { 
    var x_opt = localStorage['x_en']; 
    if (x_opt == 0) {document.getElementById('x').checked = false;}else{ 
    var select = document.getElementById('x');select.checked = true; localStorage['x_en'] = 1;} 
} 
</script> 
</head> 

<body onload="restore_options()"> 
<table border="0" cellspacing="5" cellpadding="5" align="center"> 
    <tr class='odd'><td><input type='checkbox' id='x' onclick="save_options()"/></td><td>X</td></tr> 
</table>

要访问此，你需要有可以是如下所示的页面background.html。

alert(localStorage['x_en']); //Will alert the localStorage value.

如果要从Content Script访问localStorage，则不能通过上述方法直接访问它。您需要使用称为消息传递的概念（http://code.google.com/chrome/extensions/messaging.html），它可以将背景值传递给内容脚本。正如Sergey所说，这可能是一个错字问题。

来源

2011-03-20 08:04:46

参考http://www.rajdeepd.com/articles/chrome/localstrg/LocalStorageSample.htm已死 – olegtaranenko 2012-09-04 11:41:42

@olegtaranenko这是镜像http://web.archive.org/web/20100106033106/http://www.rajdeepd .COM /用品/铬/ localstrg/LocalStorageSample.htm – TankorSmash 2012-09-07 03:20:27

window.localStorage需要使用getter和setter来访问内部对象映射。

因此，要设置：

localStorage.setItem(key, value);

要获取：

localStorage.getItem(key);

要清除地图：

localStorage.clear();

要删除项目：

localStorage.removeItem(key);

要获取长度：

localStorage.length

向关键基于内部地图索引：

localStorage.key(index);

的window.localStorage实现Storage接口：

interface Storage { 
readonly attribute unsigned long length; 
DOMString key(in unsigned long index); 
getter any getItem(in DOMString key); 
setter creator void setItem(in DOMString key, in any value); 
deleter void removeItem(in DOMString key); 
void clear(); 
};

来源

2011-03-16 09:59:57

当然，但它也适用于使用localStorage [“key”]语法。为什么它在问题代码中不起作用？ – 2015-03-26 14:18:03

-1

尝试使用window.localStorage.getItem/setItem而不是localStorage["site_width"]

来源

2011-03-16 10:02:46

使用访问器不是必需的，可以随意使用[]运算符来获取和设置值，并使用“in”运算符来测试是否存在键。

但是，它看起来像有一个在你的内容脚本一个错字：

VAR 宽度;

chrome.extension.sendRequest（{方法： “siteWidth”}，功能（响应）{ 宽度 =响应。状态; }）;

由于JavaScript区分大小写，因此这两个是不同的变量。

来源

2011-03-16 19:28:28

Chrome浏览器扩展 - 本地存储无法正常工作

回答

相关问题