JS本地存储方式，结合案例一看就懂_js本地存储几种形式-CSDN博客

本文链接：https://blog.csdn.net/qq_42504266/article/details/122112792

前端本地存储，即数据存储在浏览器中。

常用的方法有cookie、localStorage、sessionStorage

一、Cookie（常用于获取储存登录的用户信息）

作用：用于浏览器和服务器端进行通信

特点：保存在浏览器端，容易被截获，不安全

大小：4KB 每次发送请求都会携带，导致占用带宽

生命周期：浏览器从打开到关闭的过程,也可以设置过期时间

人为设置cookie：人为设置的时间


    document.cookie = "username = wsj666 password = 123456; 
                   expires = Sun, 31 Dec 2021 12:00:00 UTC;
                   path=/"

    var x = document.cookie

    console.log(x)    //  username = wsj666   password = 123456

上方例子是cookie基本语法

document.cookie = " cookie1 = value1 cookie2 = value2;

expires(设置cookie过期时间)= Sun, 31 Dec 2021 12:00:00 UTC；

path=/ (设置cookie路径)"

二、sessionStorage（会话存储）

只能储存字符串开发中经常会将对象 JSON.stringify()编码后储存

生命周期：浏览器打开到关闭的过程

大小：5M

保存的位置：浏览器端存储，不同页面中不可以获取存储信息

存储方式：键值对

刷新页面存储信息不会丢失，浏览器关闭时储存信息销毁

// 存储数据    key为自己起的名字，value为需要存储的数据

sessionStorage.setItem(key,value)


// 获取数据

sessionStorage.getItem(key)


// 删除数据

sessionStorage.removeItem(key)


// 删除所有数据

sessionStorage.clear()

demo用例：

三、localStorage（永久存储）

只能储存字符串开发中经常将对象JSON.stringify()编码后储存

生命周期：永久，除非人为删除

大小：5M甚至更大

保存的位置：浏览器端存储，不同页面中也可以获取存储信息

存储方式：键值对

永久储存，除非人为删除

// 存储数据

localStorage.setItem(key,value)


// 获取数据

localStorage.getItem(key)


// 删除数据

localStorage.removeItem(key)


// 删除所有数据

localStorage.clear()

demo用例：

记住用户名案例

将用户输入的信息进行本地存储，关闭页面也可以显示用户名

<body>
     <input type="text" id="username"> 
     <input type="checkbox" name="" id="remember"> 记住用户名
     
    <script>
        var username = document.querySelector('#username')       
        var remeber = document.querySelector('#remeber')

        
        // 分析： 点击记住用户名checkbox 本地存储username
        //        存储后下次进到页面自动展示username
        //        取消checkbox选中状态 取消本地存储

        
        if(localStorage.getItem('username')){
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        
        remeber.addEventListener('change',()=>{
          if(this.checked){
            localStorage.setItem('username',username.value)
          }  
           else{
            localStorage.removeItem('username')
          }
        })

    </script>
</body>