localStorage, sessionStorage, cookie, session比较与总结

发表于 | 更新于 | 分类于 | | 阅读次数 |

cookie 在持久保存客户端数据提供了方便，分担了服务器存储的负担。

最主要的两点区别

  • cookie 保存在客户端，session 保存在服务端（可以保存在集群、数据库、文件中），session 默认被存在在服务器的一个文件里（不是内存）。

  • 安全性：cookie 没有 session 的高。

  • session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用 cookie。

  • 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

正统的 cookie 分发是通过扩展 HTTP 协议来实现的，服务器通过在 HTTP 的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。然而纯粹的客户端脚本如 JavaScript 或者 VBScript 也可以生成cookie。而 cookie 的使用是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的 cookie，如果某个 cookie 所声明的作用范围大于等于将要请求的资源所在的位置，则把该 cookie 附在请求资源的 HTTP 请求头上发送给服务器。

cookie 主要包括：名字，值，过期时间，路径和域。

两种 cookie:

  • 若不设置过期时间，则为会话 cookie。关闭浏览器 cookie 就消失，生命期为浏览器会话期。会话 cookie 一般不存储在硬盘上而是保存在内存里。

  • 设置了过期时间的 cookie 被保存在硬盘上，关闭后再次打开浏览器，这些 cookie 仍然有效直到超过设定的过期时间。存储在硬盘上的 cookie 可以在不同的浏览器进程间共享，比如两个IE窗口。

session 机制介绍

HTTP协议是无状态协议，服务端需要记录用户的状态时，会用到 session 机制。比如用户下单，服务端要为特定的用户创建特定的 session，用于标识这个用户，并且跟踪用户，这样才知道该用户的购物车里面有几本书。

实际上大多数的应用都是用 cookie 来实现 session 跟踪的，第一次创建 session 的时候，服务端会在 HTTP 协议中告诉客户端，需要在 cookie 里面记录一个 session ID，以后每次请求把这个会话 ID 发送到服务器，我就知道你是谁了。如果客户端的浏览器禁用了 cookie，会使用URL重写或表单隐藏字段来进行会话跟踪，即每次 HTTP 交互，URL后面都会被附加上一个诸如sid=xxxxx 这样的参数，或服务器自动修改表单，添加一个隐藏字段，以便在表单提交时能够把 session id 传递回服务器服务端据此来识别用户。

webStorage: localStorage 和 sessionStorage

HTML5提供的两种在客户端存储数据的新方法。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。只能存储字符串类型的数据。不能跨域。

这两者的区别只有作用域和有效期不同。

  • localStorage 没有时间限制的数据存储，除非主动删除数据，否则数据是不会过期的。
1
2
localStorage.lastname = "Smith";
localStorage.pagecount //可以用这个属性记录用户访问某个页面的次数（刷新或关闭后再打开可继续计数）
  • sessionStorage 针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除（会话级别）。
1
2
sessionStorage.lastname = "Smith";
sessionStorage.pagecount //可以用这个属性记录用户访问某个页面的次数（刷新后会继续计数，关闭后再打开会重置计数）
  • webStorage支持事件通知机制，可以将数据更新的通知发生给监听者。

webStorage 与 cookie的比较

blog1
blog2
blog3

  • 每次请求一个新的页面 cookie 都会被发送过去；webStorage 只有在手动添加的时候才能请求。

  • cookie 只有4KB，webStorage 有平均5MB的本地存储。

  • cookie 根据 expires 设置过期时间。webStorage 在浏览器窗口关闭或者始终有效（靠手动进行删除）。

  • cookie 在同源下只要没过期就会一直共享，localStorage 在同源中没被删除情况也会共享。sessionStorage 在窗口关闭之前在同一个窗口同源下才能共享。(三者的共享都是需要同源的！)

  • cookie没有原生的 setCookie, getCookie方法，需要前端开发者自己封装。cookie 的读取只有document.cookie（一般结合encodeURIComponent设置 cookie 的 name），cookie 的删除是通过设置其 expires 强制过期实现的。webStorage 自己有setItem, getItem, removeItem, clear等方法。

  • cookie是作为HTTP规范而存在，作用是与服务器进行交互。webStorage 仅仅为了在本地存储数据而生。

  • cookie 的浏览器兼容性更好：在IE6 7中不支持localStorage sessionStorage，使用userData实现本地存储。cookie所有浏览器都支持。

  1. 数量和长度的限制。很多浏览器都限制一个域名最多保存20个cookie，每个 cookie 长度不能超过4KB，否则会被截掉。

  2. 安全性问题。 cookie 可能被拦截、篡改，如果 cookie 被拦截，就有可能取得所有的 session 信息。

  3. cookie 在每次发起 HTTP 请求的时候都会被发送给服务器，一些不需要的信息也有可能会被发送，浪费带宽。

分享
0%