LocalStorage、SessionStorage、Cookie的区别？

1、LoocalStorage

1.localStorage 生命周期是永久。

2.这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般为5MB。

3.不参与和服务器的通信。 

// 1、保存数据到本地
 
// 第一个参数是保存的变量名，第二个是赋给变量的值
 
localStorage.setItem('aaa', 'hhh');
 
// 2、从本地存储获取数据
 
localStorage.getItem('aaa');
 
// 3、从本地存储删除某个已保存的数据
 
localStorage.removeItem('aaa');
 
// 4、清除所有保存的数据
 
localStorage.clear();

        它们在服务器中的位置

 2、SessionStorage

1.sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除。

2.存放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存。

3.不参与和服务器的通信。

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('aaa', 'hhh');
 
// 2、从本地存储获取数据
sessionStorage.getItem('aaa');
 
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('aaa');
 
// 4、清除所有保存的数据
sessionStorage.clear();

复杂数据存储

上面都是对于简单的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，直接存储是不行的。

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象

var user = {
    username: 'liu',
    password: '123456'
};

1.user = JSON.stringify(user);
sessionStorage.setItem('user', user);
2.sessionStorage.setItem('name',JSON.stringify(this.form))

 
1.var arr = sessionStorage.getItem('user');

arr = JSON.parse(arr)
2.起个变量名：JSON.parse(sessionStorage.getItem('name'))

不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。

相同浏览器的不同页面间可以共享相同的 localStorage。

3、Cookie

cookie 具有极高的扩展性和可用性，是用来和服务器通讯，而不是本地存储，他只是被‘借用’到本地存储。

存储大小最大4KB

每次http请求，header都携带cookie

只能用document.cookie="..."来修改，太过于简陋