LocalStorage在chrome的不同标签中返回null [英] LocalStorage returning null in a different tab in chrome

问题描述

这是我的问题：

我在新选项卡中更新popup.js中的localStorage。我在background.js中访问相同的localStorage（同一个键）。

现在，除了chrome：// extensions选项卡（当我加载扩展名时），每个选项卡都会返回null。

我认为localStorage在所有标签中都是持续存在的。

代码：

popup.js：

  $（document）.ready（function（）{
 
 alert（localStorage.getItem（'filters'））; 
 var oldFilters = localStorage。 
 document.getElementById（'td1'）。innerHTML = oldFilters; 
 
（'filters'）; 
 //所有过滤器都显示在popup.html页面上。 var dat = oldFilters +，+ newArray [j] 
 localStorage.setItem（'filters'，String（dat））; 
} 
   
 $ b 
 background.js：
 
 
  $（window）.ready（ function（）{
 // Handler for .ready（）called。
 
 var filters = localStorage.getItem（'filters'）; 
 
 alert（background ++ filters）; 
 //这显示了chrome：extensions页面中的所有过滤器，但是在每个新的标签加载中总是弹出background + null
 
 // changeImage ）; 
  
 
 
解决方案
 背景和浏览器操作（在你的情况）页面生活在孤立的世界中，他们的本地存储细节不能彼此访问，如果你想要这种访问发生使用 chrome.storage 满足您的存储需求。
 
 
 
几乎没有优势 
 
 
 
 
 您的扩展程序的内容脚本可以直接访问用户数据，而无需使用后台页面。 即使在使用拆分隐身行为时也是如此。 
     
 用户数据可以存储为对象（localStorage API将数据存储在字符串中） 
 
 
 
使用的方法
 
 
 
 
 
 chrome.stora ge.local.get   
 
 
   chrome.storage.local.set   
 
（使用同步  $ b  h3>演示 
 
 
 manifest.json 
 
 
 
确保访问存储API的所有权限都可用。
  {
name：Local Storage Demo，
description：这是一个很小的用例使用本地存储，
version：1，
manifest_version：2，
background：{
scripts：[background.js ] 
}，
browser_action：{
default_popup：popup.html，
default_icon：logo.png
}， 
permissions：[storage] 
} 
  
 
 
 
 popup.html 
 
 
 
一个简单的弹出式html页面，它引用popup.js以超过CSP。
 <！DOCT ype html> 
< html> 
< head> 
< script src =popup.js>< / script> 
< / head> 
< body> 
< / body> 
< / html> 
  
 
 
 
 background.js 
 
 
 
内容到Chrome存储区
  //从背景页面设置一些内容
 chrome.storage.local.set（{ （存储成功）; 
}）; 
 //获取chrome存储的所有内容
 chrome.storage.local.get（null，function（obj）{
 console.log（JSON.stringify（obj））; 
}）; 
  
 
 
 
 popup.js 
 
 
 
此脚本检索并将内容设置为铬存储 
 
 
  document.addEventListener（DOMContentLoaded，function（）{
 / /获取所有内容
 chrome.storage.local.get（null，function（obj）{
 console.log（JSON.stringify（obj））; 
}）; 
 //设置浏览器动作的一些内容
 chrome.storage.local.set（{anotherIdentifier：Another awesome Content}，function（）{
 console.log（Storage Succesful）; 
}）; 
}）; 
  
如果您查看这些js页面的输出，存储通信（Background  - > popup并弹出 - >背景）。
 
This is my issue:

I update the localStorage in popup.js in a new tab. I access the same localStorage(same key) in the background.js. 

Now this is returning null in every tab apart from the chrome://extensions tab(when I load the extensions.) 

I thought localStorage was persistant across all tabs. 

Code:

popup.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));
}
background.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);

});

解决方案
Background and Browser Action(In your case) Pages live in isolated worlds, their local storage details are not accessible to each other, if you want this sort of access to happen use chrome.storage for your storage needs.

It has few advantages


Your extension's content scripts can directly access user data without the need for a background page.
A user's extension settings can be persisted even when using split incognito behavior.
User data can be stored as objects (the localStorage API stores data in strings).


Methods used


chrome.storage.local.get
chrome.storage.local.set

(use sync instead of local if the data needs to be synchronized with Google Sync)


Demonstration

manifest.json

Ensure all permissions are available for accessing storage 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"]
}


popup.html

A trivial popup html page which refers popup.js to surpass CSP.
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>


background.js

This scripts sets content to 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));
});


popup.js

This script retrieves and sets content from\to chrome storage
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");
    });
});
If you look at outputs of these js pages, communication of storage (Background -> popup and popup -> background) is achieved.

                        
这篇关于LocalStorage在chrome的不同标签中返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！