关于Web三大存储-- cookie、sessionStorage、localStorage

**

关于Web三大存储

*## cookie、sessionStorage、localStorage

cookie:每次浏览器向服务器发送请求都需要携带cookie,存储少量数据,面向服务器的,,每个cookie不能超过4k,cookie在设置的有效期内有效,默认为浏览器关闭消失。下面通过JS来产生cookie:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.js">script>
    <title>cookietitle>
    <script>
        // 存储数据   
        Cookies.set('gender', '男', {
       expires: 7 });
        //获取cookie内的数据
        Cookies.get('name');
        console.log(Cookies.get('gender'));
    script>
head>

sessionStorage(会话存储):打开多个相同的URL的Tabs页面,会创建各自的sessionStorage,在会话窗口关闭后失效。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage-WebStoragetitle>
    <script>
        //设置内容,存储内容
        sessionStorage.setItem('name', 'zhangsan');
        //获取内容
        sessionStorage.getItem('name');
        console.log(sessionStorage.getItem('name'));
        //清空  只清空value值
        // sessionStorage.clear();
        //移除  将项(name)    一起移除
        sessionStorage.removeItem('name');
    script>
head>

localStorage(本地存储):关闭当前tab甚至于在关闭浏览器时候数据依旧会保存,修改时会触发其他文档的update事件。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage-WebStoragetitle>
    <script>
        //存储数据
        localStorage.setItem('name', 'zhangsan');
    script>
head>

三者相同点:都会在浏览器端保存,有大小和同源限制。

你可能感兴趣的:(html,js,cookie)