在前端中有三种储存方式即cookie、localStorage、sessionStorage
三种储存方式各有特点各有用途
一.cookie
作用:用于浏览器和服务器端进行通信
特点:保存在浏览器端,容易被截获,不安全
大小:4KB 每次发送请求都会携带,导致占用带宽
生命周期:浏览器从打开到关闭的过程,也可以设置过期时间
cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。
cookie中的数据会随着请求被自动发送到服务器端。
使用场景:
1.记住密码,下次自动登录
2:记录用户浏览数据,进行商品(广告)推荐。
由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的WebStorage存储机制。(localStorage本地存储和sessionStorage临时存储)
二.localStorage(本地储存)
生命周期:永久,除非人为删除
大小:5M或5M以上
保存的位置:浏览器端存储,不同页面中也可以获取存储信息
存储方式:键值对
只能储存字符串 开发中经常将对象JSON.stringify()编码后储存
注意:所有存放在本地存储中的数据都是字符串。
// 存储数据
localStorage.setItem(key,value)
// 获取数据
localStorage.getItem(key)
// 删除数据
localStorage.removeItem(key)
// 删除所有数据
localStorage.clear()
判断浏览器是否支持localstorage
if(window.localStorage){
alert('浏览器支持localStorage')
}
写入方法
if(!window.localStorage){
alert('浏览器不支持localStorage')
}else{
var Storage = window.localStorage
//写入a字段
Storage['a'] = 1;
//写入b字段
Storage.b = 2;
//写入c字段
Storage.setItem('c',3)
console.log(typeof Storage['a']);
console.log(typeof Storage['b']);
console.log(typeof Storage['c']);
}
三.sessionStorage(临时储存)
生命周期:当前窗口或标签页,当前页面被关闭则数据就会清空
保存的位置:当前页面窗口
以键值对的形式存储使用。
//存储数据:
sessionStorage.setltem(key,value)
//获取数据:
sessionStorage.getltem(key)
//删除数据:
sessionStorage.removeltem(key)
//删除所有数据:
sessionStorage.clear()
三种方式的相同的都保存在浏览器端,不同在于传递方式,和数据的大小。