H5API - 2_html 引入cookie-CSDN博客

本文链接：https://blog.csdn.net/qq_47918606/article/details/126618456

1.Web存储

cookie

cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；通常通过js-cookie这个库来操作cookie

首先来创建一个有效期为7天的cookie

<head>
    <!-- 引入js-cookie库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
    <script>
        // 设置cookie 参数:key value 设置有效天数，默认单位为天
        Cookies.set('name','larry',{expires:7});
        // 打印Cookie
        console.log(Cookies,'打印cookies');
    </script>
</head>

cookie特点

1.产生于服务器端，保存于客户端

2.面向共享服务的，同一服务器的cookie时共享的，不同服务器不共享，大小限制4k

sessionStorage（会话存储）

特点：只针对于浏览器选项卡的存储，只要选项卡关闭，或者浏览器关闭，会话便会失效

会话存储中的4种方法

setItem(key, value); 设置或新增会话存储，参数：会话存储名称，值

getItem(key); 获取指定的会话存储，参数：会话存储名称

removeItem(key); 清除指定的会话存储，参数：会话存储名称

clear(); 清除所有会话存储。

<head>
    <script>
        // 用来设置会话存储
        sessionStorage.setItem('name','terry');
        sessionStorage.setItem('age','12');
        // 获取会话存储
        console.log(sessionStorage.getItem('name'));
        // 删除指定的会话存储
        sessionStorage.removeItem('name');
        // 清除全部的会话存储
        sessionStorage.clear();
    </script>
</head>

localStorage（本地存储）

特点：将数据存储到本地磁盘,即使选项卡和浏览器关闭数据依然存在,除非手动删除,否则数据一直存在本地磁盘中

本地存储钟的4种方法（与会话存储相同）

setItem(key, value); 设置或新增本地存储，参数：本地存储名称，值

getItem(key); 获取指定的本都存储，参数：本地存储名称

removeItem(key); 清除指定的本地存储，参数：本地存储名称

clear(); 清除所有本地存储。

<head>
    <script>
        // 设置本地存储
        localStorage.setItem('name','Iphone')
        localStorage.setItem('age','16')
        // 获取本地存储
        console.log(localStorage.getItem('name'));
        // 移除指定的本地存储
        localStorage.removeItem('name');
        // 移除全部本地存储
        localStorage.clear()
    </script>
</head>