本地储存cookie，localStorage，sessionStorage
Cookie是存储在用户计算机上的小文件，保存特定客户端和网站的适量数据，并可以由Web服务器或客户端浏览器访问，允许服务器提供针对特定用户定制的页面，或者页面本身可以包含一些知道cookie中的数据的脚本
<script>
// 查询cookie
// console.log(document.cookie);
// 给cookie设定时间
// var oDate = new Date();
// oDate.setDate(oDate.getDate()+3);
// document.cookie = "username=honny;expires="+oDate;
// console.log(document.cookie);
// 修改cookie
// document.cookie = "username=honny";
// document.cookie = "username=honny1";
// 删除cookie删除cookie就是把设置的日期小于当前的日期
// var oDate = new Date();
// oDate.setDate(oDate.getDate()-1);
// document.cookie = "username=honny;expires="+oDate;
// console.log(document.cookie);
// cookie的封装
function setCookie(name, value, day) {
// 设置cookie
var oDate = new Date();
oDate.setDate(oDate.getDate() + day);
document.cookie = name + "=" + value + ";expires=" + oDate;
};
function getCookie(name) {
// 获取cookie
var str = document.cookie;
var arr = str.split("; ");
for(var i=0; i<arr.length; i++){
var arr1 = arr[i].split("=")
if(arr1[0] == name){
return arr1[1];
}
}
};
function removeCookie(name) {
// 移除cookie
setCookie(name,1,-1)
};
</script>
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
简单案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" name="" id="input"> <button id="set">存储数据</button> <button id="get">获取数据</button> <button id="remove">删除数据</button> <button id="clear">清空所有数据</button> <script> // 生命周期永久有效 // 只要是同一个浏览器都是可以使用的 // 存储数据 set.addEventListener("click",function(){ // 当我们点击后就将数据存储起来 var val = input.value; localStorage.setItem("name",val); }); // 获取数据 get.addEventListener("click",function(){ // 当我们点击后就将数据获取 console.log(localStorage.getItem("name")); }); // 删除数据 remove.addEventListener("click",function(){ // 当我们点击后就将数据删除 localStorage.removeItem("name"); }); // 删除数据 clear.addEventListener("click",function(){ // 当我们点击后就将所有数据清除 localStorage.clear("name"); }); </script> </body> </html>
sessionStorage存储的数据仅在会话期间有效。sessionStorage.length可以返回数据的长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" name="" id="input"> <button id="set">存储数据</button> <button id="get">获取数据</button> <button id="remove">删除数据</button> <button id="clear">清空所有数据</button> <script> // 生命周期只要关闭浏览器就不会存在 // 只有当页面有用 // 存储数据 set.addEventListener("click",function(){ // 当我们点击后就将数据存储起来 var val = input.value; sessionStorage.setItem("name",val); }); // 获取数据 get.addEventListener("click",function(){ // 当我们点击后就将数据获取 console.log(sessionStorage.getItem("name")); }); // 删除数据 remove.addEventListener("click",function(){ // 当我们点击后就将数据删除 sessionStorage.removeItem("name"); }); // 删除数据 clear.addEventListener("click",function(){ // 当我们点击后就将所有数据清除 sessionStorage.clear("name"); }); </script> </body> </html>
另外还有一个事件storage 事件在对localStorage与sessionStorage进行数据进行增删改操作时触发。
