H5新特性_cookies，sessionStorage 和 localStorage 数据持久化

在我们访问网站的时候，有些网站是要填写登录访问的，如果我们每次访问该网站都需要重新输入用户名密码再进行验证就显得特别麻烦。

cookies，sessionStorage 和 localStorage 是三种数据持久化对象，例如：当我们访问某网站后在一定的时间内下一次打开该网站，就会自动登录用户名。都是依据这三种方法来实现的。

cookie 实现：

• 存储或修改：document.cookie = 'key=value;expires=time'
• 读取：document.cookie

// 设置一个有效期，单位为毫秒（ms），格式必须为 GMT 格式
const expires = new Date(new Date().getTime() + 1000*1000).toGMTString();
// 值为一个字符串
document.cookie = 'username=xiaoqing;expires=' + expires;

想要删除cookie其实只需要改变expires的值很小，例如将1000*1000修改为1。

localStorage 实现：

• 存储或修改：localStorage.setItem('key', 'value')
  如果key不存在则存储，如果存在则修改。
• 读取：localStorage.getItem('key')
• 删除：localStorage.removeItem('key')

localStorage.setItem('uname', 'xiaoqing');
console.log(localStorage.getItem('uname')); // xiaoqing
localStorage.removeItem('uname');
console.log(localStorage.getItem('uname')); // null

sessionStorage 实现：

实现方法与localStorage相同。

• 存储或修改：sessionStorage.setItem('key', 'value')
  如果key不存在则存储，如果存在则修改。
• 读取：sessionStorage.getItem('key')
• 删除：sessionStorage.removeItem('key')

sessionStorage.setItem('uname', 'xiaoqing');
console.log(sessionStorage.getItem('uname')); // xiaoqing
sessionStorage.removeItem('uname');
console.log(sessionStorage.getItem('uname')); // null

这三中数据持久化操作还可以存储复杂数据类型，在这之前，我们先了解一下它们三者的区别：

cookies，sessionStorage 和 localStorage 的区别：

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的

cookies会发送到服务器端。其余两个不会。

Cookie

• 每个域名存储量比较小（各浏览器不同，大致 4K ）

• 所有域名的存储量有限制（各浏览器不同，大致 4K ）

• 有个数限制（各浏览器不同）

• 会随请求发送到服务器

LocalStorage

• 永久存储

• 单个域名存储量比较大（推荐 5MB ，各浏览器不同）

• 总体数量无限制

SessionStorage

• 只在 Session 内有效

• 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

接下来使用它们存储复杂数据类型

先使用LocalStorage或SessionStorage：

假设我们需要存储一个对象：

const obj = {
	name: 'xiaoqing',
	age: 18,
	sex: 'male'
}
const objStr = JSON.stringify(obj);
localStorage.setItem('people', objStr);

我们需要先将对象转换为字符串的形式进行存储，在浏览器中显示为：

如果不转换为字符串我们将看到[Object Object]的字样。当我们使用这个对象时，可以使用JSON.parse()方法转换为json格式。

使用cookie存储复杂类型数据：

const obj = {
	name: 'xiaoqing',
	age: 18,
	sex: 'male'
}
const objStr = JSON.stringify(obj);
const expires = new Date(new Date().getTime() + 1000*1000).toGMTString();
document.cookie = `peopple=${objStr};expires=${expires}`;