LocalStorage возвращает null на другой вкладке В chrome

Это моя проблема:

Я обновляю localStorage во всплывающем окне.JS в новой вкладке. Я получаю доступ к тому же localStorage(тот же ключ) в фоновом режиме.js.

теперь это возвращает null на каждой вкладке, кроме вкладки chrome://extensions (когда я загружаю расширения.)

Я думал, что localStorage был устойчив на всех вкладках.

код:

всплывающее окно.js:

$(document).ready(function (){

    alert(localStorage.getItem('filters'));
    var oldFilters = localStorage.getItem('filters');
    //All the filters show up on the popup.html page.
    document.getElementById('td1').innerHTML = oldFilters;

    var dat = oldFilters + "," + newArray[j]
    localStorage.setItem('filters',String(dat));
}

фон.js:

$(window).ready(function() {
  // Handler for .ready() called.

 var filters = localStorage.getItem('filters');

   alert("background + "+ filters);
    //This shows all the filters in the chrome:extensions page but always pops up "background + null" in every new tab load. 

//changeImage(filters);

});
11
google-chrome-extension javascript

1 ответов

фон и Действие Браузера(в вашем случае) страницы живут в изолированных мирах, их локальные данные хранения недоступны друг другу, если вы хотите, чтобы такой доступ произошел, используйте chrome.хранение для ваших потребностей хранения.

он имеет несколько преимуществ

  • скрипты содержимого вашего расширения могут напрямую обращаться к пользовательским данным без необходимости в фоновом режиме страница.
  • настройки расширения пользователя могут сохраняться даже при использовании поведения разделения инкогнито.
  • пользовательские данные могут храниться как объекты (API localStorage хранит данные в строках).

методы, используемые

демонстрация

манифест.в JSON

убедитесь,что все разрешения доступны для доступа к API хранения.

{
"name":"Local Storage Demo",
"description":"This is a small use case for using local storage",
"version":"1",
"manifest_version":2,
"background":{
    "scripts":["background.js"]
},
"browser_action":{
    "default_popup":"popup.html",
    "default_icon":"logo.png"
},
"permissions":["storage"]
}

всплывающее окно.HTML-код

тривиальная всплывающая html-страница, которая ссылается на всплывающее окно.js превзойти CSP.

<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

фон.js

этот скрипт устанавливает содержимое в chrome storage

//Set some content from background page
chrome.storage.local.set({"identifier":"Some awesome Content"},function (){
    console.log("Storage Succesful");
});
//get all contents of chrome storage
chrome.storage.local.get(null,function (obj){
        console.log(JSON.stringify(obj));
});

всплывающее окно.js

этот скрипт извлекает и задает содержимое из\to хранения хром

document.addEventListener("DOMContentLoaded",function (){
    //Fetch all contents
    chrome.storage.local.get(null,function (obj){
        console.log(JSON.stringify(obj));
    });
    //Set some content from browser action
    chrome.storage.local.set({"anotherIdentifier":"Another awesome Content"},function (){
        console.log("Storage Succesful");
    });
});

если вы посмотрите на выходы этих страниц js, связь хранения (фоновый -> всплывающем и всплывающем -> фон) достигается.

14