0
点赞
收藏
分享

微信扫一扫

H5中的localStorage与sessionStorage

谷中百合517 2022-05-04 阅读 75

📗目录

        一、sessionStorage和localStorage 

         1.设置数据

         2.读取数据

         3.删除数据

         4. 监听本地存储的变化

         5.区别


🟢一、sessionStorage和localStorage

sessionStorage和localStorage一样,都是用来缓存客户端缓存信息。

只能存储字符串类型对象。

🟢1.设置数据

localStorage.setItem(key,value);

sessionStorage.setItem(key,value);

localStorage.setItem('key','value');//以key为名称存储一个value值
localStorage.getItem('key');//得到名称为key的值ringify(info));

🟢2.读取数据

localStorage.getItem(key);

sessionStorage.getItem(key);

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

🟢3.删除数据

localStorage.removeItem(key);

sessionStorage.removeItem(key);

//删除localStorage中存储信息的方法

localStorage.removeItem('key); //删除名称为“key”的信息。
localStorage.clear(); //清除所有方法

🟢4. 监听本地存储的变化

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

 🟢区别

  • localStorage和sessionStorage的区别在于存储的有效期和作用域的不同。
  • localStorage的生命周期是永久的,除非用户主动清除浏览器UI上存储的localStorage信息,否则它将永久存在。
  • sessionStorage的生命周期是存在于标签页或窗口,用于本地存储一个会话(session)中的数据,这些数据随着窗口或标签页的关闭而被清空。因此其仅仅是会话级别的本地存储
举报

相关推荐

0 条评论