本地存储技术
本地存储技术：cookie localStorage sessionStorage
cookie
cookie：本质上就是一些数据，存储在本地电脑中的。
cookie的作用：记录客户端的用户信息。用户信息不是狭义的用户名，密码 还可以是 点击记录，访问记录，还有购物车中的选中的商品等 等。
cookie主要应用的场景： 记住用户名，密码 未登录的购物车等等。
特点：
只能存储字符串格式
如果存储的是对象，最后就会变成[object Object]字符串
存储大小：4kb左右
同源策略：同一域名，同一IP，同一端口。 不同网站他们的cookie数据是不同通的。
存储格式：
以字符串的方式，键值对存储。
username=zhangsan
时效性：
笼统来说，cookie分为两类：会话级别的cookie和持久级别的cookie。
如果不进行特殊的设置，cookie就是会话级别的。也就是浏览器关闭，cookie中的数据就会消失。
前提：页面必须在服务器上打开。
基础操作：
添加
语法格式：document.cookie = "key=value;expires=日期";
document.cookie = "username=zhangsan";
查询
直接使用document.cookie就可以获取到cookie存储的所有数据.
【注意】不管你存的是什么类型，最后都会转为字符串。
修改
重新再添加一遍，只要key值相同，后面添加的就会把前面添加的覆盖
删除
只需要设置有效期为过去的时间，就会自动删除。
<script>
// document.cookie = "username=zhangsan;expires="+new Date("2021-07-05 12:00:00");//添加
document.cookie = "age=20";//添加值
// var person = {
// name:"Yasuo",
// skill:"狂风绝息斩"
// }
// document.cookie = "person="+JSON.stringify(person);
// var data = document.cookie;//查询
// console.log(data);
// var dataArr = data.split("=");
// console.log(dataArr[1]);
// console.log(JSON.parse(dataArr[1]));
console.log(new Date("2021-07-03 10:50:00").toGMTString());
// toGMTString（） 转格林威治时间
document.cookie = "age=25;expires="+new Date("2021-07-03 02:45:00").toGMTString();
</script>
Exp(记住用户名字):
<body>
<!-- 需求：
如果记住用户名被选中了，下次打开页面，输入框中的内容应该存在。如果未选中，再次打开页面，输入框没有内容。
分析：
1.复选框被选中时，将用户名保存在cookie中。
2.页面一打开，从cookie中取值。 如果cookie有值，就将其添加到输入框中。 没有值就不添加。
3.复选框从选中变成了未选中，清除cookie中的数据。
-->
<p><input type="text" name="username" id="userName"></p>
<input type="checkbox" id="readName"> 记住用户密码
</body>
<script>
var readName = document.getElementById("readName");
var userName = document.getElementById("userName");
// console.log(userName)
readName.onchange = function() {
if (readName.checked) {
document.cookie = "username=" + userName.value + ";expires=" + new Date("2021-07-14 12:00:00").toGMTString();
} else {
document.cookie = "username=" + userName.value + ";expires=" + new Date("1970-01-01 12:00:00").toGMTString();
}
}
if (document.cookie) {
var arr = document.cookie.split(";");
arr.forEach(function(item, index) {
var itemArr = item.split("=");
if (itemArr[0].trim() == "username") {
userName.value = itemArr[1];
readName.checked = true;
}
});
}
</script>
localStorage
H5新增，有兼容问题。IE低版本不可以用。 IE8以下。
为了解决cookie存储空间不足的问题。
cookie只能存4KB左右，localstorage可以存储5M左右。
【注意】
访问一个对象不存在的属性时，返回的是undefined。
基础使用:
添加:
格式1：localstorage.属性名 = 属性值
格式2：localstorage[属性名] = 属性值
格式3：localStorage.setItem(key,value)
修改：
第二次添加会将第一次添加的覆盖。前提是：key是相同的。
获取：
localstorage.属性名
localstorage[属性名]
localStorage.getItem(key)
添加值和获取值 推荐使用setItem和getItem
删除：
单个删除： localStorage.removeItem(key)
全部删除： localStorage.clear();
特点：
同源策略：不同网站的数据是不同通的。
可以在本地使用。
只能存储字符串
永久存储
<script>
// 如果需要处理兼容性,使用前需要进行判断.
//逻辑业务代码
if (!window.localStorage) {
//如果不支持,在这里添加处理代码.
alert("您的浏览器不支持本地存储，请升级浏览器！")
} else {
window.localStorage.username = 'zhangsan'; //写法一
window.localStorage['age'] = 20; //写法二
window.localStorage.setItem('hobby', 'LOL'); //写法三，推荐使用3
var storage = window.localStorage;
storage.setItem('hobby', 'DNF');
console.log(window.localStorage);
console.log(storage.age); //取值方式一
console.log(storage['age']); //取值方式二
console.log(storage.getItem('age')); //取值方式三，推荐使用3
storage.removeItem('hobby'); //删除值
console.log(storage);
storage.clear(); //删除全部值
console.log(storage);
}
// 在控制台展开对象时，会更新最新的对象的值。
</script>
sessionStorage
用法与localstorage一模一样
唯一的区别: 时效性
localstorage是永久存储的,
sessionStorage 是 会话级别的.
两种会话结束的方法: 代码控制和浏览器关闭.
<script>
// var session = window.sessionStorage;
// session.setItem("username","lisi")
// session.setItem("username","wangwu")
// session.setItem("age","29")
// console.log(session.getItem("username"));
// session.removeItem("username");
// session.clear();
</script>
总结
cookie localstorage sessionStorage 的区别
cookie：
前后端都可以操作。
存储大小 4KB
发送请求时，自动将cookie的值发送给后端。数据相对不安全，可能会被劫持。
时效性：默认是会话级别，可以设置有效期
localstorage
前端操作
存储大小 5M
永久保存
sessionStorage
前端操作
存储大小 5M
会话级别
共同点：
只能存字符串。
同源策略，同一域名，同一IP，同一端口 下的数据可以共通。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
