浏览器存储的三种方式------Cookie、localStorage和SessionStorage

0x00 写在前面

这是不得不写的一篇。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

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

Cookie 以名/值对形式存储，
当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

1	username=John Doe

创建Cookie

1
2
3

document.cookie="username=John Doe";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";//为Cookie创建一个过期时间
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//使用path参数告诉浏览器Cookie的路径

读取Cookie

1	var x = document.cookie;//以字符串的方式返回所有的cookie

修改Cookie

1	document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//类似于创建Cookie，旧的Cookie将会被覆盖。

删除Cookie

设置express参数为以前的时间。

1	document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

0x02 localStorage

localStorage是HTML5中新加入的特性，用来作为本地存储的，解决了cookie存储空间不足的问题。localStorage 类似于sessionStorage。区别在于:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储,当页面被关闭时,数据存储在sessionStorage 会被清除。

localStorage的使用:

清空localStorage
1
localStorage.clear()

存储数据

1 2	localStorage.setItem("name","Mark") localStorage.name = "Mark";

读取数据

localStorage.getItem("Mark")//读取保存在localStorage对象里名为name的变量的值
localStorage.name //"Mark"
localStorage.valueOf()//读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)

删除某个变量

1	localStorage.removeItem("name"); //undefined

检查localStorage里是否保存某个变量

1 2	localStorage.hasOwnProperty('name') // true localStorage.hasOwnProperty('sex') // false

将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

将JSON存储到localStorage里

var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}
students = JSON.stringify(students); //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
 
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

0x03 SessionStorage

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

sessionStorage的使用：

存储数据

1 2	sessionStorage.setItem('testKey','这是一个测试的value值');//采用setItem()方法存储 sessionStorage['testKey'] = '这是一个测试的value值';//通过属性方式存储

读取数据

1 2	sessionStorage.getItem('testKey'); //通过getItem()方法取值、 sessionStorage['testKey']; // 通过属性方式取值

存储Json对象

sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

0x04 三者比较

特性	localstorage	SessionStorage	Cookie
存储空间	5M左右	5M左右	4k，不能超过20个
生命周期	永久	当前会话	在设置的过期时间之前一直有效
与服务器通信	仅在浏览器中保存，不参与和服务器的通话	仅在浏览器中保存，不参与和服务器的通话	携带在HTTP头中,使用过多会导致性能的问题
应用场景	常用于长期登录（判断用户是否已登录）	敏感账号的一次性登录	1.判断用户是否登陆过网站，以便下次登录时能够实现自动登录（记住密码）；2.保存上次登录的时间等信息；3.保存上次查看的页面；4.浏览计数
作用域	不同浏览器无法共享，相同浏览器的不同页面之间可以共享localStorage（页面属于相同域名和端口）	不同浏览器无法共享，不同页面或标签页间无法共享。（当一个标签页包含多个iframe标签且属于同源页面，可以共享）	Cookie的作用域为当前设置的域名及其子域名
接口	可以接受原生接口，也可以封装来对Object和Array有更好支持	可以接受原生接口，也可以封装来对Object和Array有更好支持	原生的Cookie接口不友好，需要自己封装setCookie，getCookie

这三者的共同点是：都是保存在浏览器端，且同源的。

0x00 写在前面

0x01 Cookie

0x02 localStorage

0x03 SessionStorage

0x04 三者比较