JS的localStorage和sessionStorage的用法_sessionstorage.getitem("hy-user-info")-优快云博客

本文介绍了如何使用sessionStorage和localStorage进行数据的存储与读取操作，并演示了如何存储引用类型值及监听存储变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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