本地存储

1. 数据存储在用户浏览器中

2. 设置、读取方便、甚至页面刷新不丢失数据

3. 容量较大，sessionStorage和localStorage约 5M 左右

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特性： 可以多窗口（页面）共享（同一浏览器可以共享）  以键值对的形式存储使用

本地存储分类-localStorage

语法:

    //存  语法:属性名,属性值
    //localStorage.setItem('键','值')
    localStorage.setItem('uname', '张飞')
    localStorage.setItem('age', 18)
    localStorage.setItem('age', 19)//修改
    
    // 取 语法:localStorage.getItem('键')
    const ren = localStorage.getItem('uname')
    console.log(ren); //张飞
    
    // 删 localStorage.removeItem
    localStorage.removeItem('uname') //删除一个数据

本地存储分类-sessionStorage

特性：

1. 生命周期为关闭浏览器窗口

2. 在同一个窗口(页面)下数据可以共享

3. 以键值对的形式存储使用

4. 用法跟localStorage 基本相同

存储复杂数据类型

因为本地只能存储字符串,无法存储复杂数据类型,所以需要将复杂数据类型转换成JSON字符串,在存储到本地

语法:

<script>
    const obj = {
      uname: '公子',
      age: 19,
      gender: '男'
    }
    // 存储数据   无法直接使用
    localStorage.setItem('obj', obj)
    // 获取
    console.log(localStorage.getItem('obj')); //[object Object]
    // 存储复杂数据类型:
    // 需要将复杂数据类型转换成JSON字符串,存储到本地
    // 语法:JSON.stringify(复杂数据类型)
    localStorage.setItem('obj', JSON.stringify(obj))
    //JSON对象属性和值都有引号,而引号统一是双引号
    console.log(localStorage.getItem('obj')); 
    //{  
    //  "uname":"公子",
    //  "age":19,"
    //  "gender":"男"
    //}
 
  </script>

问题： 因为本地存储里面取出来的是字符串，不是对象，无法直接使用

解决： 把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串)

    // 把JSON字符串为对象
    let objs = localStorage.getItem('obj')
    console.log(JSON.parse(objs));
    // Object
    //  age: 19
    //  gender: "男"
    //  uname: "公子"