前端本地存储,即数据存储在浏览器中。
常用的方法有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>
cookie 与 session 的区别
1. cookie 数据存放在客户的浏览器上,session 数据放在服务器上
2. 考虑到安全应当使用 session
3. session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。