1、window.localStorage

    浏览器的本地存储，持久化存储，存储之后不手动删除，就永远存在
    在存储的时候，只能存储字符串
    可以实现页面通讯
    
    增：window.localStorage.setItem(key,value)
    删：window.localStorage.removeTtem(key)
    清空：window.loaclStorage.clear()
    查：window.localStorage.getItem(key)

2、 window.sessionStorage

    浏览器本地存储，但是是临时存储，浏览器关闭后，存储内容消失
    跨页面通信，必须是从当前页面跳转过去的才能实现通讯
    增：window.sessionStorage.setItem(key,value)
    删：window.sessionStorage.removeItem(key)
    清空：window.sessionStorage.clear()
    查：window.sessionStorage.getItem(key)

3、 cookie

    只能存储字符串，并且有自己的固定格式 document.cookie = 'key=value'
    存储大小为 4kb 左右
    存储具有时效性
        默认为sessionStorage,但是我们也可以指定过期时间
        在创建存储时 可以用 document.cookie = ' key=value;expires=' + time
    操作必须依赖浏览器
        目前可以借助 liveserver  启动页面，不要以本地方的方式启动
    前后端通信的时候，会把cookie  内部存储的数据发送到后端
    前后端都可以操作
    存储依赖域名，同一个域名内可以通讯，否则不可以

4、 三者的区别

storage 和 cookie 的区别

    出现时间
        cookie  有js就有了
        storage  在H5的时候才有的
    存储大小
        cookie     4kb左右
        storage    4MB~20MB
    前后端交互
        cookie   交互时会自动传递给后端
        storage   交互时不会自动传递给后端，但能手动传递
    前后端操作
        cookie   前后端语言都可以操作
        storage   只能前端操作
    过期时间
        cookie      可以手动指定时间，也有默认时间 （sessionStorage）
        storage     没有过期时间

localStorage 和 sessionStorage

    过期时间
        localStorage    持久化存储，除非手动清除
        sessionStorage      临时存储，关闭浏览器数据就会被清除
    跨页面通信
        localStorage   可以跨页面通信
        sessionStorage    只能从当前页面跳转过去的才可以实现
    共同点
        都必须是字符串
        存储数据其他数据类型的时候，需要借助 JSON 的方法进行一个类型转换