通过JavaScript本地存储数据
文章目录
- 本地存储
- 本地存储分类 - localStorage
- 本地存储分类 - sessionStorage
- 存储复杂数据类型
- 解决方法
本地存储
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新都不丢失数据
- 容量较大，sessionStorage和localStorage约5M左右
本地存储分类 - localStorage
可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在。
特性：
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
语法：
- 存储/修改数据：
localStorage.setltem(key,value) // 有改无增 - 获取数据：
localStorage.getItem(key) - 删除数据：
localStorage.removeItem(key)
本地存储只能存储字符串类型，非字符串类型会转换成字符串类型存储
本地存储分类 - sessionStorage
特性:
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage相同
存储复杂数据类型
本地只能存储字符串，无法存储复杂数据类型。
解决方法
需要将复杂数据类型转换成JSON字符串，再存储到本地。
语法：JSON.stringify(复杂数据类型)
保存时将对象转为JSON字符串：
const obj = {uname: 'lily',age: 19,gender: '女'}localStorage.setItem('obj', JSON.stringify(obj))console.log(typeof localStorage.getItem('obj')) // 返回String，obj存进去是字符串，不是对象// JSON对象的属性和值都有引号，而且统一是双引号
取用时把JSON字符串转换为对象：JSON.parse(localStorage.getItem('obj'))