Расширение 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 для обработки взаимодействия между сценарием содержимого и локальным хранилищем:

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

На самом деле ни один из этих кодов не работает. Мне это кажется достаточно убедительным, но я не очень опытный программист, поэтому могу ошибаться.

Может ли кто-нибудь объяснить мне местное хранение в условиях непрофессионала?


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 из сценария содержимого, вы не можете напрямую получить к нему доступ указанным выше методом. Вам необходимо использовать концепцию передачи сообщений (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 ({метод: "siteWidth"}, функция (ответ) {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