客户端数据存储、获取、清除的方法

1. localStorage

 存：localStorage.setItem(key,value) 调用一次，存储一次数据。浏览器中右键检查里面的Application中查看

取：localStorage.getItem(key)

全部清除：localStorage.clear()

清除单个：localStorage.remove(key)

2.sessionStorage

存：sessionStorage.setItem(key,value)

取：sessionStorage.getItem(key)

全部清除：sessionStorage.clear()

清除单个：sessionStorage.remove(key)

localStorage/sessionStorage区别：

        1. localStorage存储的数据限制在同源

            sessionStorage存储的数据不仅限制在同源，还限制在同一窗口。可以理解为当取数据的页面和存数据的页面不是同一个时，取到的数据就为null。

        2. localStorage存储的数据只要不清除，就永久有效

            sessionStorage存储的数据只要窗口一关闭，就失效

共同之处：

1. 存储大小为5M

2. 不会发送到服务器

3. document.cookie

存：document.cookie="name=value"

取：document.cookie()

特点：1. 只限制同源，时间Max-Age默认为session(临时存储)。可以设置存储时间和路径

           2. 设置存储时间

              document.cookie = ` Max-Age=${2*24*60*60}; path=/ `   其中 '/'表示根路径

              document.cookie = ` Expires=${标准时间}; path=/ `  标准时间是指"Sat Apr 29 2023               18:50:51 GMT+0800 (中国标准时间)"形式的时间

                默认有效期是一次会话（打开到关闭浏览器的过程）

          3. 存储大小为4k

          4. 会发送到服务器

用来解决HTTP协议无状态问题的技术方案。缺点：由服务器端创建，每次浏览器访问服务器时都要将cookie传回，当cookie过大时会影响传输性能；且cookie直接存储在客户端，容易被篡改。

 注：需要使用Live Server 

4. cookie存取数据的封装函数

        存储数据：使用语法：setCookie(key,value,day)。其中：key：存储的数据名 value：存储的数据值 day：存储的天数。

//cookie存储的封装
function setCookie(key,value,day){
    document.cookie = `${key}=${value};Max-Age=${day*24*60*60};Path=/`
}

        获取数据：使用语法：getCookie(key) 其中key是要获取数据的名字。

//cookie获取存储的数据
function getCookie(key){
    let allCookie = document.cookie();
    let cookieArr = allCookie.split(';');  //通过;来切割字符串并转为数组
    for(let i=0;i<cookieArr.length;i++){
        let cookie = cookieArr[i].trim().split('=');
        if(cookie[0] == key){
            return cookie[1];
        }
    }
    return null;
}