1.本地存储介绍
- 数据存放在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage和localStorage约5M左右
- 常见使用场景:页面刷新数据不丢失
2. 本地存储分类-localStorage
目标:
能够使用localStorage把数据存储到浏览器中
作用:
将数据永久存储在本地,除非手动删除,否则关闭页面也会存在
特性:
可以多窗口共享
以键值对的形式存储使用
语法:
存储数据: localStorage.setItem(key,value)
获取数据: localStorage.getItem(key)
删除数据:localStorage.removeItem(key)
更改数据:localStorage.setItem(key,new-value)
注意:本地存储只能存储字符串
2. 本地存储分类-sessionStorage
特性:
生命周期为关闭浏览器窗口
在同一个窗口下数据可以共享
以键值对的形式存储使用
用法和localStorage基本相同
3. 本地存储-存储复杂数据类型
把对象转换成字符串进行存储,使用JSON
const obj ={
uname:'li'
age:18
gender:'男'
}
localStorage.setItem('obj',JSON.stringify(obj))
console.log(localStorage.getItem('obj'))
把字符串转换成对象进行取
localStorage.setItem(JSON.parse('obj'))