js本地存储：localStorage & sessionStorage

原文：js本地存储：localStorage & sessionStorage

localStorage和sessionStorage都是H5的产物，可以理解为cookies的升级版，他们的作用是在浏览器中存储key-value数据。

localStorage用于永久的保存整个网站的数据，保存的数据没有过期时间，保存的数据需要手动删除。
sessionStorage仅作用在会话级别，当你关闭会话（关闭窗口）后所有保存的数据自动清空。

localStorage和sessionStorage能存储的数据容量一般都为5M，比原先的cookies大很多。

而且localStorage和sessionStorage比原来的cookies更具安全性，隐私模式下无法被获取，且无法被爬虫获取。

值得一说的是，localStorage和sessionStorage只支持String类型数据存储，其他类型要使用都需要在存取过程中先进行类型转换。

用法

保存数据

//方法一、
window.localStorage.setItem('keyString', 'valueString')
//方法二、
window.localStorage.keyString = valueString
//方法三、
window.localStorage['keyString'] = valueString

读取数据

//方法一、
let value = window.localStorage.getItem('keyString')
//方法二、
let value = window.localStorage.keyString
//方法三、
let value = window.localStorage['keyString']

删除数据

//方法一、删除所有数据
window.localStorage.clear()
//方法二、删除指定数据
window.localStorage.removeItem('keyString')

修改数据

//方法一、
window.localStorage.keyString = 'newValueString'
//方法二、
window.localStorage['keyString'] = 'newValueString'
//也可活用上面提供的方法进行数据修改

获取键名

window.localStorage.key(index)
//该方法可以通过索引获取key名，在忘记key名的时候可以使用
//typeof index 为 Number

**PS：**localStorage和sessionStorage除了时效区别，其他用法都一样；对于存取数据的方法官方推荐使用setItem和getItem方法。

其他用法

存取JSON数据

因为localStorage和sessionStorage仅限制存储String类型数据，所以存储JSON数据需要先用JSON.stringify()方法转为JSON字符串，用的时候再用JSON.parse()方法转为JSON格式。

const data = {
    id: 20211003,
    name: 'zhangsan',
    sex: 'man'
}
//存
const dataString = JSON.stringify(data)
window.localStorage.setItem('data', dataString)
//取
const jsonString = window.localStorage.getItem('data')
const jsonObj = JSON.parse(jsonString)
console.log(jsonObj)

storage事件

window.addEventListener('storage', onStorageChange)

function onStorageChange(e) {
    console.log(e.key) //发生变化的键名
    console.log(e.oldValue) //更新前的值。如果该键为新增加，则这个属性为null。
    console.log(e.newValue) //更新后的值。如果该键被删除，则这个属性为null。
    console.log(e.url) //原始触发storage事件的那个网页的网址。
}