五、本地存储
1、存储 localStorage.setItem('设置的属性名','值')
2、注意:本地存储只能存储字符串, 所以转换成JSON字符串 (JSON格式要求除了数字和布尔, 只能用双引号)
2.1、存储的是复杂数据类型 直接将对象存储到本地里面去 => 会丢失数据 => [object Object]- 所以将复杂数据类型转化成JSON字符串
let obj = {
a:1,
b:2
}
localStorage.setItem('myObj',JSON.stringify(obj))
2.2、获取- 存储的是JSON字符串 获取出来的也是字符串 字符串不能直接使用点语法操作属性。所以将JSON字符串重新转换成 JS对象
JSON.parse(localStorage.getItem('myObj'))
3、获取 localStorage.getItem('属性名')
4、实际应用:
//一开始从本地存储里取数据时有可能会获取不到,因为没有,所以会加上一个空数组
let dataArr = JSON.parse(localStorage.getItem('设置的属性名')) || [ ];
//存
localStorage.setItem('设置的属性名', JSON.stringify(dataArr))
//需要去管理本地的数组
5、流程
每一次触发事件, 获取数据,组合成一个对象数据
本地存储没有专门的增语法, 所以需要准备一个数组将每一次的对象数据追加进去
然后在将这个数组转换成JSON字符串存入到本地数据里面去
每一次刷新的时候,都可以先从本地中将数据获取出来
6、小结:但凡是复杂数据要想存储在本地, 必须通过JSON.stringify转换成JSON字符串才可以, 同样,获取出来的数据也需要通过JSON.parse转换成对象或者数组才能使用