Chrome擴展程序-Localstorage無法正常工作

Question

我正在編寫一個Chrome擴展程序，該擴展程序使用內容腳本來修改網站的某些部分。 內容腳本運行良好，直到我嘗試將選項頁面添加到擴展中。

現在，我正在使用options.html文件將用戶首選項保存到localstorage，如下所示：

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

該代碼均無效。 對我來說，它看起來足夠扎實，但是我不是一個非常有經驗的程序員，所以我可能是錯的。

有人可以用外行的方式向我解釋本地存儲嗎？

Answer 1

window.localStorage具有需要使用的getter和setter才能訪問內部對象映射。

因此，設置：

localStorage.setItem(key, value);

要得到：

localStorage.getItem(key);

要清除地圖：

localStorage.clear();

刪除項目：

localStorage.removeItem(key);

獲得長度：

localStorage.length

要基於內部映射中的索引進行鍵輸入：

localStorage.key(index);

要了解更多信息，請訪問： http : //dev.w3.org/html5/webstorage/#the-storage-interface

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

Answer 2

詳細了解localStorage的工作原理，您可以從中找到有關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.

如果要從內容腳本訪問localStorage，則無法通過上述方法直接訪問它。 您需要使用稱為消息傳遞（ http://code.google.com/chrome/extensions/messaging.html ）的概念，該概念可以將值從后台傳遞到內容腳本。 正如謝爾蓋（Sergey）所說，這可能是拼寫錯誤的問題。

Answer 3

使用訪問器不是強制性的，可以隨時使用[]運算符獲取和設置值，並使用“ in”運算符測試鍵是否存在。

但是，您的內容腳本中似乎有一個錯字：

var Width ;

chrome.extension.sendRequest（{method：“ siteWidth”}，function（response）{ width = response.status;}）;

由於JavaScript區分大小寫，因此這兩個是不同的變量。

Answer 4

嘗試使用window.localStorage.getItem/setItem代替localStorage["site_width"]

Chrome擴展程序-Localstorage無法正常工作

問題描述

4 個解決方案

解決方案1
3 2011-03-16 09:59:57

解決方案2
2 已采納 2011-03-20 08:04:46

解決方案3
0 2011-03-16 19:28:28

解決方案4
-1 2011-03-16 10:02:46

Chrome擴展程序-Localstorage無法正常工作

問題描述

4 個解決方案

解決方案1 3 2011-03-16 09:59:57

解決方案2 2 已采納 2011-03-20 08:04:46

解決方案3 0 2011-03-16 19:28:28

解決方案4 -1 2011-03-16 10:02:46

解決方案1
3 2011-03-16 09:59:57

解決方案2
2 已采納 2011-03-20 08:04:46

解決方案3
0 2011-03-16 19:28:28

解決方案4
-1 2011-03-16 10:02:46