三存储_三种storage location的含义及读写性质-CSDN博客

本文链接：https://blog.csdn.net/longmushasha/article/details/105988863

1、cookie
大小4kb
什么是cookie？
Cookie 是一些数据, 存储于你电脑上的文本文件中。。(session 运行在服务端)
为什么用到cookie？
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
js全局变量生命周期有限，不能在关闭页面或者跳转页面的时候起到保存数据的作用
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时，他的名字可以记录在 cookie 中
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录

如何使用？
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
运行在客户端可以用js进行设置
创建：

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

读取：
var x = document.cookie
修改：
document.cookie = “username=John Smith; expires=Thu, 19 Dec 2043 12:00:00 GMT; path=/”;（覆盖掉原来的）
删除：
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;(时间设置为已过期的就好)

2、localstorage
W3C笔记如下：
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 中的键值对会被清空。
localStorage 使用
首先在使用 localStorage 的时候，我们需要判断浏览器是否支持 localStorage 这个属性：

if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
}

localStorage 的写入和读取有三种方法:

if(！window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
}
//第一种方法读取
    var a=storage.a;
    console.log(a);
    //第二种方法读取
    var b=storage["b"];
    console.log(b);
    //第三种方法读取
    var c=storage.getItem("c");
    console.log(c);

存储进去的是 int 类型，但是打印出来却是 string 类型，这个与 localStorage 本身的特点有关，localStorage 只支持 string 类型的存储。

localStorage 的删除

storage.clear();
//或者移除某一个
storage.removeItem("a");

localStorage 键的获取

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

提供转JOSN数据方法

　	//JSON对象转JSON字符串--把对象转成字符串存入localstorage
　　var obj = {"a": 1,"b": 2};
　　obj = JSON.stringify(obj); //转化为JSON字符串
　　localStorage.setItem("temp2", obj);

　　//JSON字符串转JSON对象-读取的localstorage转json对象
　　obj=JSON.parse(localStorage.getItem("temp2"))