Расширение Chrome - Localalstorage не работает - PullRequest
Новая
       10

Расширение Chrome - Localalstorage не работает

2 голосов
/ 16 марта 2011

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

Сейчас я использую файл options.html для сохранения пользовательских настроек в localalstorage, как вы можете видеть здесь: 

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

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

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

Ответы [ 4 ]

3 голосов
/ 16 марта 2011

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();
};
2 голосов
/ 20 марта 2011

Чтобы узнать, как работает 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)), которая может передавать значения из фона в скрипты содержимого. Как и сказал Сергей, это может быть проблемой с опечаткой.

0 голосов
/ 16 марта 2011

Использование методов доступа не является обязательным, не стесняйтесь использовать оператор [] для получения и установки значений и оператор «in» для проверки наличия ключа.

Тем не менее, похоже, что в вашей опечатке есть опечаткаскрипт содержимого:

var Width ;

chrome.extension.sendRequest ({method: "siteWidth"}, функция (ответ) { width = response.status;});

Поскольку JavaScript чувствителен к регистру, эти две переменные являются разными.

0 голосов
/ 16 марта 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...