Cookie、LocalStorage和SessionStorage区别详解
概念理解
Cookie它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage 是 HTML5 标准中新加入的技术,localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。
sessionStorage 与 localStorage 的接口类似,相较cookie一般存储大一些的数据,但保存数据的生命周期与 localStorage 不同。 Session的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
他们区别对比如下图所示
应用场景
1、在开发中每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简,比较常用的一个应用场景就是判断用户是否登录。
2、针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录。
3、用到 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。
4、产生一些本地数据,localStorage是非常适用,遇到一些内容特别多的表单,优化用户体验,可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写发挥sessionStorage 的作用。
sessionStorage常用方法
用在同一个窗口(页面)下的数据可以共享
sessionStorage.setItem(key, value) :存储数据
sessionStorage.getItem(key) :获取数据
sessionStorage.removeItem(key) :删除数据
sessionStorage.clear() :删除所有数据
localStorage常用方法
用在多窗口(页面)共享数据,同一浏览器可以共享数据
localStorage.setItem(key,value) :存储数据
localStorage.getItem(key) :获取数据
localStorage.removeItem(key) :删除数据
localStorage.clear() :清空数据 / 删除所有数据
应用举例
<body>
<input type="text" id="username" />
<input type="checkbox" id="check" /> 记住用户名
</body>
<script>
var username = document.querySelector('#username');
var check = document.querySelector('#check');
check.checked = false;
// 先看看localStorage里是否已有用户名,有就直接拿出来放到text框中,且复选框选中
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
check.checked = true;
}
// 监听复选框是否改变
check.addEventListener('change', function() {
if (this.checked) {
// 如果复选框被选中,则将用户名存入localStorage中
localStorage.setItem('username', username.value);
} else {
// 复选框未被选中,则清空用户名
localStorage.removeItem('username');
check.checked = false;
}
})
</script>
sessionStorage应用实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SessionStorage</title>
<script type="text/javascript">
window.onload = function () {
//首先获得body中的3个input元素
var msg = document.getElementById("msg"); //文本框要输入的内容
var getData = document.getElementById("getData"); //获取数据
var setData = document.getElementById("setData"); //保存数据
var removeData = document.getElementById("removeData"); //移除数据
setData.onclick = function () //存入数据
{
if (msg.value) {
sessionStorage.setItem("data", msg.value); //把data对应的值保存到sessionStorage
alert("信息已保存到data字段中");
} else {
alert("信息不能为空");
}
}
getData.onclick = function () //获取数据
{
var msg = sessionStorage.getItem("data");
if (msg) {
alert("data字段中的值为:" + msg); //把data对应的值弹出来
} else {
alert("data字段无值!");
}
}
removeData.onclick = function () //移除数据
{
var msg = sessionStorage.getItem("data");
//sessionStorage.clear(msg); //清除本地所有的key/value
sessionStorage.removeItem("data");
}
}
</script>
</head>
<body>
<input id="msg" type="text" />
<input id="setData" type="button" value="保存数据" />
<input id="getData" type="button" value="获取数据" />
<input id="removeData" type="button" value="移除数据" />
</body>
</html>
运行代码后
存储数据可以在控制台查看到数据