H5中的cookie和数据存储

H5中的cookie和数据存储

Cookie
数据存储到计算机中，通过浏览器控制添加与删除数据
Cookie的特点
存储限制
域名100个cookie,每组值大小4KB
客户端、服务器端，都会请求服务器（头信息）
页面间的cookie是共享
cookie的作用
页面用来保存信息
同一个网站中所有页面共享一套cookie
cookie的使用
设置cookie 过期时间expires
读取cookie 字符串分割
删除cookie 已经过期

cookie的设置，获取和删除

 // 设置cookie
        function setCookie(name, value, d) {
            var dateo = new Date(),	//获取当前时间对象
                day = dateo.getDate();	//获取当前的日期-1值
            dateo.setDate(day + d);	//修改当前值为d天后
            document.cookie = name + "=" + encodeURI(value) + "; expires=" + dateo.toGMTString();
            //设置cookie,expires为过期日期，设置的格式应该是"name=value; expires=过期日期"
        }

        //获取cookie
        function getCookie(name) {
            var cookiestr = document.cookie, //获取cookie,格式应该为"name=value; name0=value0"
                cookiearr0 = cookiestr.split("; "), //以"; "来分构字符串成数组 ["name=value","name0=value0"]
                cookiearr1 = [];
            for (var i = 0; i < cookiearr0.length; i++) {
                cookiearr1 = cookiearr0[i].split("="); //以"="分构字符串为数组,["name","value"]
                if (cookiearr1[0] == name) { //如果找到相同名称的cookie,返回它的值
                    return decodeURI(cookiearr1[1]);
                }
            }
            return "";//如果没有找到相同名的cookir,返回空
        }

        //删除cookie
        function removeCookie(name) {
            setCookie(name, "", -1);//把过期时间设为昨天，即删除了当前cookie
        }

cookie的使用

说明：
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：
$(selector).post(URL,data,function(data,status,xhr),dataType)

URL	必需。规定将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： data - 包含来自请求的结果数据status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。

<input type="text" id="password"/>
<button id="btn">登录</button>
<button id="getDataBtn">获取数据</button>
<button id="delDataBtn">清除数据</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
        btn.onclick = function (){
            $.post('https://h5sm.com/uni/users/loginAndRegister',{
                username: username.value,
                password: password.value
            },function (res){
                console.log(res)
                if (res['status'] === 1){
                    setCookie('token',res.msg.token,7)
                    setCookie('userInfo',JSON.stringify(res.msg),1)
                }
            })
        }

        getDataBtn.onclick = function (){
            const user_str = getCookie('userInfo')
            const user_obj = JSON.parse(user_str)
            console.log(user_obj)
            console.log(user_obj.update_time)
        }

        delDataBtn.onclick = function () {
            removeCookie('token')
        }



        // 设置cookie
        function setCookie(name, value, d) {
            var dateo = new Date(),	//获取当前时间对象
                day = dateo.getDate();	//获取当前的日期-1值
            dateo.setDate(day + d);	//修改当前值为d天后
            document.cookie = name + "=" + encodeURI(value) + "; expires=" + dateo.toGMTString();
            //设置cookie,expires为过期日期，设置的格式应该是"name=value; expires=过期日期"
        }

        //获取cookie
        function getCookie(name) {
            var cookiestr = document.cookie, //获取cookie,格式应该为"name=value; name0=value0"
                cookiearr0 = cookiestr.split("; "), //以"; "来分构字符串成数组 ["name=value","name0=value0"]
                cookiearr1 = [];
            for (var i = 0; i < cookiearr0.length; i++) {
                cookiearr1 = cookiearr0[i].split("="); //以"="分构字符串为数组,["name","value"]
                if (cookiearr1[0] == name) { //如果找到相同名称的cookie,返回它的值
                    return decodeURI(cookiearr1[1]);
                }
            }
            return "";//如果没有找到相同名的cookir,返回空
        }

        //删除cookie
        function removeCookie(name) {
            setCookie(name, "", -1);//把过期时间设为昨天，即删除了当前cookie
        }
    </script>

运行得：

在控制台中的applicant中的有的Cookies，里面可以看出我们点击登陆会存储cookie。其他删除和获取也会是的其中的cookie发生变化。

h5 storage

​ Storage
​ 数据存储到计算机的某个地方，要通过对象上的方法增删改查
​ window.sessionStorage
​ session临时回话，从页面打开到页面关闭的时间段
​ 临时存储的特点
​ 窗口的临时存储，页面关闭，本地存储消失，跟没有设置时间的cookie一样
​ localStorage
​ 永久存储（ 要通过所提供的方法删除数据 ）
​ Storage的特点
​ 存储量限制 ( 5M )
​ 客户端完成，不会请求服务器处理
​ sessionStorage数据是不共享、 localStorage共享

<body>
<input type="text" id="username">
<button id="btn">存储</button>
<br>
<a href="03-storage.html">在其他页面拿数据</a>
<script>
    // 数据共享
    // 数据管理
    btn.onclick = function (){
        // console.log(window.sessionStorage);
        window.sessionStorage.setItem('user',username.value)
        window.sessionStorage.name = 'kevin'
    }
</script>
</body>

03-storage.html
<script>
    console.log(window.sessionStorage.getItem('user'))
    console.log(window.sessionStorage.name);
</script>

输入数据后，点击登陆，点击a标签后，就会跳转到03-storage.html页面中并且在控制台上可以看得到

永久数据持久化

window.sessionStorage

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

保存数据语法：

sessionStorage.setItem("key", "value");

读取数据语法：

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法：

sessionStorage.removeItem("key");

删除所有数据：

sessionStorage.clear();

返回值：一个存储对象

<input type="text" id="username">
<button id="btn">存储</button>
<button id="getData">获取</button>
<button>清除单个</button>
<button>清除全部</button>
<script>
    // 同一个域  协议 域名 端口
    btn.onclick = function (){
        window.localStorage.setItem('username',username.value)
        window.localStorage.setItem('userinfo',JSON.stringify({
            username: username.value,
            age: 18
        }))
    }
    getData.onclick = function (){
        const data = localStorage.getItem('userinfo')
        console.log( JSON.parse(data)    )
    }
    // 清除单个
    window.localStorage.removeItem('username')
    // 清除多个
    window.localStorage.clear()

ck = function (){
const data = localStorage.getItem(‘userinfo’)
console.log( JSON.parse(data) )
}
// 清除单个
window.localStorage.removeItem(‘username’)
// 清除多个
window.localStorage.clear()