前端缓存用法

字段存取

//方法一
window.localStorage.setItem("name","张三");//放入缓存
let name = window.localStorage.getItem("name");//取出缓存

//方法二
sessionStorage.setItem("name","张三");//放入缓存
let name = sessionStorage.getItem("name");//取出缓存

json存取

//方法一
window.localStorage.setItem("userInfo", JSON.stringify(userInfo));//放入缓存（json转成字符串）
let userInfo = JSON.parse(window.localStorage.getItem("userInfo"))//取出缓存（字符串转json）

//方法二
sessionStorage.setItem("userInfo", JSON.stringify(userInfo));//放入缓存（json转成字符串）
let userInfo = JSON.parse(sessionStorage.getItem("userInfo"))//取出缓存（字符串转json）

两者主要区别

1、生命周期‌

• window.localStorage 数据是永久存储的，只要用户不手动删除，数据就会一直存在。
• sessionStorage‌ 数据在浏览器窗口或标签页关闭时被自动清除‌。

2、作用范围

• window.localStorage 存储的数据在整个浏览器的同一域名下都可以访问，包括不同的标签页和窗口‌。
• sessionStorage‌ 存储的数据仅在同一浏览器窗口或标签页中可用，不同的标签页和窗口间不能共享sessionStorage数据‌