[JavaScript知识库]浏览器存储(cookie、localStorage、sessionStorage)

常见的客户端存储方式有

• cookie
• localStorage
• sessionStorage

localStorage

cookie 一般只有几kb，我们使用非常有限，并且有时间限制
cookie 依托于http协议，但localStorage和sessionStorage跟http协议没有关系

甚至在FTP协议可以使用

Web Storage 是个对象，键值对的形式
5MB

cookie和storage二者的共同点就是不能跨域，非同源不可用

Storage受协议，主机号，端口号影响，不同源的网站不能访问彼此的Storage

localStorage是没有时间限制，浏览器和网页的关闭不会有影响
sessionStorage仅在本次会话和当前窗口有效
localStorage和sessionStorage都继承自Storage
这两个对象都是window自带的，不需要通过构造函数去创建

重要的属性和方法

1、length 本地存储数据的数量
2、key() 通过索引找到存储的数据 有些多余，浏览器不一定会按照存的顺序去排
3、getItem(key) 通过键名取到本地存储的数据
4、setItem(key,value) 设置一个本地存储数据
5、removeItem(key) 删除一个本地存储数据
6、clear() 清空本地存储数据

localStorage.setItem('name', 'kaivon');
localStorage.setItem('age', '18');
localStorage.setItem('sex', 'male');
localStorage.setItem('insterest', 'drink');

// 存储的value值必须是字符串
// 像非字符串的，可以认为经过toString方法
// 那怎么存一个对象或数组呢
// 通过JSON.stringify 和 parse
var color = ["red", "green"];   // toString "red", "green"
var color = { "c1": "red", "c2": "green" }  // toString [object Object]
localStorage.setItem('color', JSON.stringify(color));
console.log(JSON.parse(localStorage.getItem('color')));

localStorage.removeItem('color');

有哪几种方式可以删除localStroage

• 主动删除
  • removeItem和clear
  • 通过控制台删除
• 浏览器的无痕模式
  • 浏览器会新开一个数据库存储localStorage，在浏览器关闭时，localStorage数据都会被清除

事件

storage事件必须用addEventListener绑定
该事件的触发是当本页面的localStroage改变，在其它同样使用这个localStorage的网页触发该事件

window.addEventListener('storage',function(ev){
  // 事件对象的一些有用的属性
	console.log(ev.key);	//修改的是哪一个localstorage（名字key）
	console.log(ev.newValue);	//修改后的数据
	console.log(ev.oldValue);	//修改前的数据
	console.log(ev.storageArea);	//storage对象
	console.log(ev.url);	//返回操作的那个页面的url
});

Storage是可以在组件或跨页面进行通信的手段。

但其实只要是客户端存储都可以实现。

总结

主要是总结一下客户端和服务器端存储的区别。

只要是缓存，不管服务器端还是客户端都可以有以下特点

（1）网上商城中的购物车

（2）保存用户登录信息

（3）将某些数据放入缓存中，供同一用户的不同页面使用

（4）防止用户非法登录

cookie和session

• 一个保存在客户端，一个保存在服务器端。
• cookie认doman和path,session认sessionid
• cookie会伴随着HTTP协议发送，而session是服务器通过认证客户端发过来的sessionid进行查找用户对应的session对象，至于服务器是否响应这些信息，那是服务器的事情
• 存储内容：cookie只能保存字符串类型，session就是一个json对象，只要是对象能保存的，什么都可以保存。
• cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
• session的安全性高于cookie
  • sessionid是加密之后保存在cookie的，当然也有可能就是服务器端响应某个字段，客户端存储到本地缓存
  • session并不依赖于cookie，如果依赖于cookie，那其他端怎么办，sessionID在客户端如何存储，如何发送都由客户端和服务器端协商完成，服务器可以和客户端协商某个请求字段发送sessionID,cookie只是比较常见的一种形式，因为浏览器端的cookie是自动管理的。

缺点：cookie：（1）大小受限

（2）用户可以操作（禁用）cookie，使功能受限

（3）安全性较低

（4）有些状态不可能保存在客户端。【像密码等验证信息】

（5）每次访问都要传送cookie给服务器，浪费带宽。

（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。当然也可以将session的数据存到数据库。

（2）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

Storage和cookie

浏览器端的Storage包括了localStorage 和 sessionStorage

两者均属于浏览器端

Storage是H5提出的，为了弥补cookie的不足。

• 大小

  • cookie的大小被限制在4KB。
  • 而storage大小大概是5MB

• 发送

  • cookie是随HTTP事务一起被发送的
  • 而storage是需要自行发送

• API

  • cookie没有原生的API接口
  • storage提供了细腻化的接口

• 协议

  • cookie依托于HTTP协议

  • storage不依托于任何协议

  • 但两者都存在同源问题

  • 有一个问题要注意一下

    这里说的同源问题，就是浏览器的同源策略问题，cookie的domain【这个也需要有效，浏览器才会认，一个网站给另一个网站设置cookie是不可取的】以及path没有关系

• 缓存时间

  • cookie的缓存时间是需要自行设定的，如果没有设定，就是会话结束后删除。

  • localStorage是永久缓存，localStorage除非主动删除数据，否则数据永远不会消失

  • sessionStorage是会话结束后删除。

    • 会话结束的概念：

      sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

storage的优点

• 管理更加灵活，不会自动发送，可以自行控制哪些数据跟请求一起发送，减少带宽的消耗
• 存储量大，大概是5MB
• 有细腻化的API接口，可以更加灵活的管理，存取都比较方便
  • 存储一些购物车的状态都比较方便
  • 登录状态的存取都比较方便

sessionStorage和localStorage

共同点

• 两者都是存在浏览器端
• H5新增的API
• 缓存量大
• 有对应api可以进行灵活的管理
• 不随HTTP请求自动发送，减少贷款的消耗
• 遵循同源策略，不同域之间的Storage不可访问

不同点

• sessionStorage是会话结束后就会删除
• 而localStorage会永久保存在浏览器端，除非自行删除，否则数据永久存在