JS本地存储方式，结合案例一看就懂

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

常用的方法有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.cookieconsole.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>

cookie 与 session 的区别

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上

2. 考虑到安全应当使用 session

3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。