js本地存储

1. 本地存储

  - 将数据存储在本地浏览器的缓存中

  - 只能存文本，有大小，时间，跨域，安全限制

  - localStorage，sessionStorage，cookie

2. localStorage和sessionStorage

  - window的子对象

  - 5M

  - localStorage永久级

  - sessionStorage会话级

  - 不存在路径，只有设备，浏览器，地址域

  - localStorage.xxx = "hello"

  - delete localStorage.xxx

  - localStorage.xxx

  - localStorage.setItem("key", "val")

  - localStorage.getItem("key")

  - localStorage.removeItem("key")

  - localStorage.clear()

3. cookie

  - 会话跟踪技术，跟踪http协议，记录每次连接成功后产生的数据，每次都会自动跟随http协议发往后端

  - cookie是document的字符属性

  - document.cookie = "cookie字符"

  - cookie字符的规则

    - 名和值用等号连接，名值和配置信息之间使用分号隔开

      - "key=value;配置名=配置值;配置名=配置值"

    - path：路径配置

      - 路径值：

        - 根路径（所有文件夹的最顶层，相等于ip地址）：/

        - 其他路径：/p1/p2/p3

    - expires：配置有效期

      - 有效期值：

        - 日期对象：配合new Date()计算出指定日期

    - document.cookie = "msg=hello;path=/abc;expires=" + d;

  - 使用

    - 增改删：document.cookie = "cookie字符"

      - 新的key或新的path，都是增

      - 老的key且老的path，新的值，或新的日期配置，都是改

      - 老的key且老的path，过去的日期对象，就是删

    - 查：document.cookie

      - 获取到当前路径下能拿到的所有cookie

      - 需要解析后才能够得到所需的cookie

  - 封装

    - 增：cookie.setItem("key", "val", {})

    - 删：cookie.removeItem("key", {})

    - 查：cookie.getItem("key")