sessionstorage、localstorage、cookie的简介及对比

webstorage（本地存储）

• webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage；
• 目标：
  • 提供一种在cookie之外存储会话数据的路径
  • 提供一种存储大量可以跨会话存在的数据的机制

WebStorage的优点

• 存储空间更大：cookie为4KB，而WebStorage是5MB
• 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量
• 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便
• 快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快
• 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题

WebStorage的数据操作

• setItem (key, value) —— 保存数据，以键值对的方式储存信息；
• getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值；
• removeItem (key) —— 删除单个数据，根据键值移除对应的信息；
• clear () —— 删除所有的数据；
• key (index) —— 获取某个索引的key；

localStorage（本地存储）和sessionStorage（会话存储）

• HTML5的WebStorage提供了两种API：localStorage和sessionStorage
• localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信；
• sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

两者的区别

• 作用域的不同：
  • 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
  • 注意：页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的；
• 存储大小：
  • localStorage和sessionStorage的存储数据大小一般都是：5MB
• 存储位置：
  • localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信；
• 存储内容类型：
  • localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理；
• 获取方式：
  • localStorage：window.localStorage;；sessionStorage：window.sessionStorage；
• 应用场景：
  • localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登录

cookie

• HTTP Cookie简称cookie；
• 通过name=value的形式存储；
• 生命期：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；
• 存放数据大小为4K左右；
• 有个数限制（各浏览器不同），一般不能超过20个；
• 与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；

cookie的构成

• 名称：name(不区分大小写,但最好认为它是区分的)；
• 值:value(通过URL编码:encodeURIComponent)；
• 域；
• 路径；
• 失效时间：一般默认是浏览器关闭失效,可以自己设置失效时间；
• 安全标志：设置安全标志后只有SSL连接的时候才发送到服务器；

cookie的作用

主要用于保存登录信息

cookie的优点

• 具有极高的扩展性和可用性；
• 通过良好的编程，控制保存在cookie中的session对象的大小；
• 通过加密和安全传输技术，减少cookie被破解的可能性；
• 只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失；
• 控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的cookie；

cookie的缺点

• cookie的长度和数量的限制：
  • 每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉；
• 安全性问题：
  • 如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用；
• 有些状态不可能保存在客户端：
  • 例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若把计数器保存在客户端，则起不到什么作用；

cookie、session和localStorage的区别

名称	存储限制	数据作用方式	数据有效期	作用域
cookie	不能超过4k	始终在同源的http请求中携带（即使不需要）	只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭	在所有同源窗口中都是共享的
sessionStorage	可以达到5M或更大	不会自动把数据发给服务器，仅在本地保存	仅在当前浏览器窗口关闭前有效	不在不同的浏览器窗口中共享，即使是同一个页面
localStorage	可以达到5M或更大	不会自动把数据发给服务器，仅在本地保存	始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据	在所有同源窗口中都是共享的