HTML5新增的web缓存

HTML5新增的web缓存，有localStorage 和sessionStorage：

localStorage 方法存储的数据没有时间限制

  保存数据

  localStorage.setItem("name", “Jack");

  读取数据

  localStorage.getItem("name");

  删除数据

  localStorage.removeItem ("name");

sessionStorage 方法当用户关闭浏览器窗口后，数据会被删除 

  保存数据

  sessionStorage.setItem("name", “Jack");

  读取数据

  sessionStorage.getItem("name");

  删除数据

  sessionStorage.removeItem ("name");

不同点：

  1、存储大小

  cookie 数据大小不能超过4K

  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

  2、有效时间

   localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据

   sessionStorage  数据在当前浏览器窗口关闭后自动删除

   cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

  3、数据与服务器之间的交互方式

  cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

顺便介绍一下cookie

使用 js 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

document.cookie="name=Jack";

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="name=Jack; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="name=Jack; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 js 读取 Cookie

var x = document.cookie;

使用 js修改 Cookie

document.cookie="name=Bob; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 js删除 Cookie

只需要设置 expires 参数为以前的时间即可，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，删除时不必指定 cookie 的值。

以上仅供自己交流学习