JS的localStorage和sessionStorage的用法

最新推荐文章于 2024-08-15 20:33:20 发布

guanguan0_0

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量790

点赞数

分类专栏： JS、jQuery 文章标签： js session 本地存储 localStorage sessionStorage

本文链接：https://blog.csdn.net/guanguan0_0/article/details/80914307

版权

JS、jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

sessionStorage（临时存储）：为每个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

localStorage（长期存储）：浏览器关闭后，数据依然会一直存在

*引用类型的值要转换成JSON

1、保存数据到本地存储：

 
  const userInfo = { 
 
      name: '管管', 
 
     age: 18, 
 
  }; 
 
  sessionStorage.setItem('userInfo', JSON.stringify(userInfo)); 
 
  localStorage.setItem('userInfo', JSON.stringify(userInfo));

2、获取本地存储的数据：

 
  var 
  data1 = 
  JSON 
  .parse(sessionStorage.getItem( 
  'userInfo' 
  )); 
    
 
 
  var 
  data2 = 
  JSON 
  .parse(localStorage.getItem( 
  'userInfo' 
  )); 
 

3、删除本地存储中的某条数据：

 
  sessionStorage.removeItem( 
  'userInfo' 
  ); 
 
 
  localStorage.removeItem( 
  'userInfo' 
  ); 
 

4、清空本地存储：

 
  sessionStorage.clear(); 
 
  localStorage.clear();

5、监听本地存储的变化：

*storage发生变化（增删改）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变storage

 
  window.addEventListener( 
  'storage' 
  , 
  function 
  (e) 
  {     
    
 
 
      console.log( 
  'key' 
  , e.key); 
 
 
      console.log( 
  'oldValue' 
  , e.oldValue); 
 
 
      console.log( 
  'newValue' 
  , e.newValue); 
 
 
      console.log( 
  'url' 
  , e.url); 
 
 
  }) 
 