本地存储和Cookies的区别

1、主讲人： 曹兴会本地存储和早期的本地存储WebStorage与Cookie 的区别Cookie的区别HTML5规范的本地存储1.早期的本地存储（1）什么是 Web 本地存储本地持久化存储，一直是本地客户端程序优于 web 程序的一个方面。对于本地应用程序，操作系统会提供一个抽象层，用于存储和获取特定于应用程序的数据，例如用户设置或者运行时状态。这些值可以被存储于注册表、INI 文件等，或者其他什么地方，这取决于操作系统的实现。如果本地应用程序，需要不只是键值对形式的本地存储，可以使用嵌入式数据库、发明自己定义的文件格式，或者其他很多种解决方案。 然而，web 应用程序就没这些优点了。于是在 w

2、eb 早期我们就发明了 cookie，目的是在本地持久存储少量数据。1.早期的本地存储（1）什么是 Web 本地存储Web 应用的数据可以保存在两个地方，一个是 Web 服务器，一个是 Web 客户端（用户计算机的浏览器的一个目录）。这两个地方都有各自适合保存的数据：敏感信息，以及不希望别人篡改的数据，需要在服务端处理的数据等，需要一直保存在 Web 服务器 - 安全，高效，可靠；一些不太重要的信息 - 用户偏好，应用状态；不同页面间共享的数据；离线状态下需要保存的用户数据，需要放在用户本地；HTML5 之前我们想要在用户本地保存信息，基本上只能使用 cookie（主要是在浏览器和服务器之间保

3、存身份信息）。cookie 保存少量数据很方便，但是它也有一些不好的地方。（2）Cookie的缺陷1.早期的本地存储数据大小：作为存储容器，cookie的大小限制在4KB左右, 尤其对于现在复杂的业务逻辑需求，4KB的容量只能存储一些配置字段和简单的单值信息。安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。当多人共用一台计算机时使用Cookie可能会泄露用户隐私，也带来安全问题.网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了

4、一些不必要的流量损失。1.早期的本地存储（3）本地存储的发展真正需求：更大的存储空间在客户端上的不受页面刷新的影响不需要提交到服务器正如你所看到的这些解决方案，它们都有或多或少的问题：不是特定于某一浏览器，就是需要安装第三方插件。我们还需要对不同之处做一种“屏蔽”（正如 dojox.storage 所做的那样），它们有着不同的接口、不同的存储限制、不同的用户体验。这就是 HTML5 所要解决的问题：提供一种标准的 API，由多种浏览器提供原生支持，不需要安装第三方插件。2. HTML5规范的本地存储（1）什么是HTML5存储HTML5 存储（HTML5 Storage），也就是标准上说的 We

5、b Storage，是一种让 web 页面能够以键值对的形式，在客户端web浏览器中将数据存储在本地的方法。就像 cookie 一样，这种数据在你离开 web 站点、关闭标签页、退出浏览器等等的时候依然保存。不同于 cookie 的地方是，这个数据不会被发送到远程 web 服务器（除非你自己手动发送）。另外，不同于我们前面所说的那些解决方案，这种机制是 web 浏览器原生提供的，所以不需要第三方插件的支持。 目前，几乎所有主流浏览器的最新版本都支持 HTML5 Storage 了，包括 Internet Explorer！IEFirefoxSafariChromeOperaiPhoneAndr

6、oid8.0+3.5+4.0+4.0+10.5+2.0+2.0+2. HTML5规范的本地存储（2）HTML5的本地存储对象HTML 本地存储提供了两个在客户端存储数据的对象：localStorage用于持久化的本地存储，浏览器窗口关闭后，localStorage存储的数据仍然可以被访问。所有浏览器窗口可以共享localStorage的数据，保存的数据永远不会过期，只能手动删除。sessionStorage用于本地存储一个会话中的数据，它不是一种持久化的本地存储。这些数据只有在同一个会话中的页面才能访问，当前页面不可以访问新开页面的数据，并且会话结束后数据也随之销毁而无法使用.3. WebSt

7、orage与Cookie 的区别（1） cookie在浏览器与服务器之间来回传递。 cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 sessionStorage：仅在当前浏览器窗口关闭前有效。 localStorage 始终有效，长期保存。sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。（2）数据有效期不同：3. WebStorage与Cookie 的区别（3） cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。（4）作用域不同： sessionStorage不在不同的浏览器窗口中共享；