JS本地存储

一、Cookie

1、Cookie是什么？
不要在Cookie中保存密码等敏感信息

1、Cookie全称HTTP Cookie,简称Cookie 
2、是浏览器存储数据的一种方式
3、 因为存储在用户本地，而不是存储在服务器上，是本地存储
4、一般会自动随着浏览照每次请求发送到服务器端

2、Cookie使用场景
利用 Cookie跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个网页的停留时间等

3、Cookie的基本用法

基本语法：
注意：写入Cookie(不能一起设置,只能一个个设置)
    document.cookie='students="dog"'
    document.cookie='age="17"'  
读取：
//读取的是一个由名值对构成的字符串,每个名值对之间由", " (一个分号和一个空格)隔开
console.log(document.cookie)//students="dog"; age="17"; name=test

4、Cookie的属性
1）基本属性：Cookie的名称（Name）和值（Value）
2）最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值
3）注意：Cookie的名称或值如果包含非英文字母， 则写入时需要使用encodeURIComponent() 编码， 读取时使用decodeURIComponent() 解码
4）一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

 document.cookie=`username=${encodeURIComponent('二狗子')}`
 document.cookie=`${encodeURIComponent('二狗子')='username'}`

失效(到期)时间
对于失效的cookie,会被浏览器清除，如果没有设置失效(到期)时间，这样的Cookie称为会话Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失。

Expires、Max-Age设置有效时间
注意：如果max-age的值是0或者是负数，则cookire会被删除

expires(参数类型Date)
    document.cookie=`sex='man'; expires=${new Date('2022-01-01 00:00:00')}`
max-age(值为数字，表示当前时间+多少秒后过期，单位是秒)
    document.cookie='cat="hi"; max-age=30'

以下属性了解即可
Domain域(域名)
Domain限定了访问Cookire的范围,默认值：当前网站域名
使用JS只能读写当前城或父域的Cookie, 无法读写其他城的Cookie

 document.cookie='EXPIRES="expires";domain=127.0.0.1'
//www.imooc.com 、 m.imooc.com 当前域   //imooc.com  父域

Path路径
限定了访问Cookie的范围（同一域名下）
当Name、Domain、Path 这3个字段都相同的时候，才是同一个Cookie

 document.cookie='wwww="expires";path=/HTTP 协议、存储、Ajax'

HttpOnly
设置了HttpOnly的属性的Cookie不能通过js去访问

Secure安全标志
Secure 限定了只有在使用了https 而不是http 的情况下才可以发送给服务端

二、Cookie封装

增

    function setCookie(keys,value,{maxAge,domain,path,secure,httpOnly}={}){
        let cookieText=`${encodeURIComponent(keys)}=${encodeURIComponent(value)}`
        if( typeof maxAge==='number'){
            cookieText+=`; max-age=${maxAge}` 
        }
        if( domain){
            cookieText+=`; domain=${domain}` 
        }
        if( path){
            cookieText+=`; mpath=${path}` 
        }
        if( secure){
            cookieText+=`; secure` 
        }
        if(httpOnly){
            cookieText+=`; httpOnly` 
        }
        document.cookie=cookieText

    }
    setCookie('promap','happy',{maxAge:1572,secure:true})

读

    function getCookie(name){
        getName=`${encodeURIComponent(name)}`
        const cookie=document.cookie.split('; ')
        for(const items of cookie){
            const[keys,name]=items.split('=');

            if(getName===keys){
                return decodeURIComponent(name)
            }
        }
    }
    const vl=getCookie('promap')
    console.log(vl)

删

    // 根据name,domain,path删除Cookie
    function removeCookie(name,{domain,path}={}){
        setCookie(name,'',{domain,path,maxAge:-1})  

    }
    removeCookie('students')

三、Cookie注意事项

1、前后端都就可以创建cookie
2、cookie有数量限制：
   每一个域名下的cookie有数量限制(20-50)
   当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
3、cookie有大小限制
   每一个cookie的存储量很小，最多只有4kb左右

四、localStorage、sessionStorage

1、localStorage
1）localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
2）单个域名下的localStorage总大小有限制（大概5M）
3）localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存）,否则数据是永不会过期的

增
    localStorage.setItem('name','alex')
    localStorage.setItem('age','600')
读： 获取不存在的返回null
    console.log(localStorage.getItem('name'))
    console.log(localStorage.length)
删
    localStorage.removeItem('name')
清空
    localStorage.clear()

2、sessionStorage
当会话结束(比如关闭浏览器)的时候， sessionStorage中的数据会被清空

    sessionStorage.setItem('sex','娜娜')
    sessionStorage.getItem('sex')
    sessionStorage.removeItem('sex')
    sessionStorage.clear()

3、注意事项

1、localStorage存储的键和值只能是字符串类型
2、不是字符串类型，也会先转化成字符串类型再存进去
3、不同域名下能否共用loaclStorage的（不能）
l4、localStorage的兼容性7及以下版不支持localStorage,IE8开始支持

四、总结