本地存储的规则

最新推荐文章于 2025-01-09 01:39:16 发布

原创最新推荐文章于 2025-01-09 01:39:16 发布 · 428 阅读

CC 4.0 BY-SA版权

本文介绍了如何利用JavaScript的localStorage进行本地数据存储，强调了存储和获取数据时需将复杂数据类型转化为JSON字符串。本地存储适用于保存用户状态或缓存数据，通过示例展示了如何处理和操作存储的数组。每次触发事件时，应更新存储的数据，并在页面加载时检查并使用本地存储的数据。总结指出，存储复杂数据必须经过JSON.stringify转换，而读取时需用JSON.parse还原。

五、本地存储
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转换成对象或者数组才能使用