通过JavaScript本地存储数据

---

本地存储

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新都不丢失数据
• 容量较大，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'))

---