利用浏览器本地存储做跨页面传值（转）

最新推荐文章于 2023-02-24 09:54:05 发布

yournevermore

最新推荐文章于 2023-02-24 09:54:05 发布

阅读量1k

点赞数

分类专栏：前端

前端专栏收录该内容

41 篇文章 1 订阅

订阅专栏

转自：https://blog.csdn.net/taylorzun/article/details/81112392


 
 
   
   
    
    
   
   
   
   
    
    
     
      changeTheme () {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           dispatch({ 
     
     type: 
     
     'app/switchTheme' })
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         changeOpenKeys (openKeys) {
    
    
   
   

   
   
    
    
   
   
   
   
    
          
     
     window.localStorage.setItem(
     
     `${prefix}navOpenKeys`, 
     
     JSON.stringify(openKeys))
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           dispatch({ 
     
     type: 
     
     'app/handleNavOpenKeys', 
     
     payload: { 
     
     navOpenKeys: openKeys } })
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
       }

虽然字面上理解了window.localStorage.setItem的意思，但是对其用法不甚理解。所以找了一些文档，将自己的理解整理下来：

针对上面的这个部分，这段代码可以缓存当前页面的停留的子页面和展开的数据，当切换出去该页面再回来的时候，展示的仍然是离开时的页面和数据。

HTML5种的web storage包含两种存储方式：localStorage和sessionStorage，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。

localStorage是持久化的本地保存，只要你找不到其所在地没有主动删掉，就会一直存在。就像一些缓存，都把APP删了还有。

sessionStorage是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。


 
 
   
   
    
    
   
   
   
   
    
    
     
     window.localStorage.setItem(key,value);
     
     //设置指定key的数据（JSON格式）
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.localStorage.getItem(key);
     
     //获取指定key的数据
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.localStorage.removeItem(key);
     
     //删除指定key的数据
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.localStorage.clear();
     
     //清空所有的存储数据
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.sessionStorage.setItem(key,value);
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.sessionStorage.getItem(key);
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.sessionStorage.removeItem(key);
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.sessionStorage.clear();

应该还有更深的理解。待续。

-----------------------------------------------------------continue--------------------------------------------------------------------------------

localStorage其他注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：


 
 
   
   
    
    
   
   
   
   
    
    
     
     if(!
     
     window.localStorage){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         alert(
     
     "浏览器支持localstorage");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }
     
     else{
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var storage=
     
     window.localStorage;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var data={
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     name:
     
     'taytay',
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     sex:
     
     'woman',
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     hobby:
     
     'program'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         };
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     var d=
     
     JSON.stringify(data);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         storage.setItem(
     
     "data",d);
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     console.log(storage.data);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法


 
 
   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     var data={
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     name:
     
     'taytay',
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     sex:
     
     'woman',
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     hobby:
     
     'program'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     };
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     var d=
     
     JSON.stringify(data);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     window.localStorage.setItem(
     
     "data",d);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //将JSON字符串转换成为JSON对象输出
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     var json=storage.getItem(
     
     "data");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     var jsonObj=
     
     JSON.parse(json);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     console.log(
     
     typeof jsonObj);