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