Разширение за Chrome - Localstorage не работи

Пиша разширение за 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;
    });

Нито един от този код всъщност не работи. Изглежда ми достатъчно солидно, но не съм много опитен програмист, така че може и да греша.

Може ли някой да ми обясни localstorage с неспециализирани термини?


javascript google-chrome local-storage
person Bjarki Jonasson    schedule 16.03.2011    source източник

Отговори (4)


arrow_upward
2
arrow_downward

За да научите как работи 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 от скрипта за съдържание, не можете да получите директен достъп до него чрез горния метод. Трябва да използвате концепцията, наречена Message Passing (http://code.google.com/chrome/extensions/messaging.html), които могат да предават стойностите от фона към скриптове за съдържание. Точно както каза Сергей, това може да е проблем с печатната грешка.

person Srikanth Rayabhagi    schedule 20.03.2011
comment
справка rajdeepd.com/articles/chrome/localstrg/LocalStorageSample.htm е мъртъв - person olegtaranenko; 04.09.2012
comment
@olegtaranenko Ето огледало http://web.archive.org/web/20100106033106/http://www.rajdeepd.com/articles/chrome/localstrg/LocalStorageSample.htm - person TankorSmash; 07.09.2012

arrow_upward
3
arrow_downward

window.localStorage има гетери и сетери, които трябва да се използват за достъп до картата на вътрешния обект.

И така, за да зададете:

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();
};
person Adam Ayres    schedule 16.03.2011
comment
Разбира се, но също така е валидно да се използва синтаксис на localStorage[key]. Защо не работи в кода на въпроса? - person Zig Mandel; 26.03.2015

arrow_upward
0
arrow_downward

Използването на инструменти за достъп не е задължително, не се колебайте да използвате оператор [], за да получите и зададете стойности, и оператор „in“, за да проверите дали ключът съществува.

Въпреки това изглежда, че има правописна грешка в скрипта ви за съдържание:

var Ширина;

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

Тъй като JavaScript е чувствителен към главни и малки букви, тези две са различни променливи.

person Sergey 'm17' Kolosov    schedule 16.03.2011

arrow_upward
-1
arrow_downward

опитайте да използвате window.localStorage.getItem/setItem вместо localStorage["site_width"]

person Nir Levy    schedule 16.03.2011