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瀏覽器擴展 - 本地存儲無法正常工作

回答

相關問題