HTML5的几种存储方式

HTML5的几种存储方式

html5在引入webStorage之前，主要用cookies.

web storage
html5的webstorage 分两种：LocalStorage 和SessionStorage，两者的差别主要在生命周期不同。

LocalStorage
LocalStorage用于持久化的本地存储，存储资料在客户端（client）的浏览器上，除非主动删除数据，否则数 据是永远不会过期的。LocalStorage使用键值对的方式进行存储，存储的方式只能是字符串。存储内容可以有图片、json、样式、脚本等只要可以序列化为字符串的。

localstorage API基本使用方法：

使用localStorage.setItem(key,value)设置数据，如下：

for(var i=0; i<10; i++){
localStorage.setItem(i,i);
}

​ 使用localStorage.getItem(key) 获取数据，使用localStorage.valueOf()获取全部数据， 如下：

for(var i=0; i<10; i++){
localStorage.getItem(i);
}

​

​ 使用localStorage.removeItem(key)删除数据，如下：

for(var i=0; i<5; i++){
localStorage.removeItem(i);
}
​

使用localStorage.clear()清空全部数据，使用localStorage.length 获取本地存储数据数量，
使用localStorage.key(N)获取第 N 个数据的 key 键值。
2 . SessionStorage

SessionStorage用于本地存储一个会话中 的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束，例如关闭窗口后，，数据也会随之被销毁。它是一种会话级别的存储。

SessionStorage的使用方法与localstorage的使用方法相似。

webstorage 与cookie的区别

cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localstorage和sessionstorage不会自动把数据传送给服务器端，仅在本地保存。

存储大小限制不同，cookie的存储数据大小要求不能超过4k，每次的http请求都会携带cookie，所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5m或者更大，不同浏览器设置可能不同。

数据生命周期有所不同。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效，localstorage持久有效，直到手动删除。

作用域不同，sessionstorage不在不同浏览器中共享，即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。

cookie的数据还有路径的概念，可以通过设置限制cookie只属于某一个路径。

web storage支持事件通知机制，可以将数据更新的通知发送给监听者。

​

使用webstorage的好处：

减少网络流量：使用webstorage将数据保存在本地中，不用像cookie那样，每次传送信息都需要发送cookie，减少了不必要的数据请求，同时减少数据在浏览器端和服务器端来回传递。

快速显示数据：从本地获取数据比通过网络从服务器获取数据效率要高，因此网页显示也要比较快。

临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

不影响网站效能：因为web storag只作用在客户端的浏览器，不会占用频宽，不想网站效能，所以可以把size大，安全性低的资料存储在web storage中，提ga高网站效能。

​

离线缓存（application cache）
HTML5引入了应用程序缓存器，可对web进行缓存，在没有网络形况下使用，通过创建cache manifest文件,创建应用缓存。

参考链接：http://blog.csdn.net/molly_xu/article/details/51147236（转载）

http://blog.csdn.net/molly_xu/article/details/51147236（转载）

如何使用

参考链接：http://www.jianshu.com/p/aaf287f7c3ad（转载）

例如有一个web有三个文件，index.html, a.js,b.css,现在需要把js文件和css文件缓存起来。

在index.html上加上

test.manifest的清单格式如下： CACHE MANIFEST#上面一句必须#v1.0.0#需要缓存的文件CACHE:a.jsb.css#不需要缓存的文件NETWORK:*#无法访问页面FALLBACK:404.html

manifest文件的mime-type必须是 text/cache-manifest

类型 manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。
而第一行CACHE MANIFEST为固定格式，必须写在前面。
以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。

CACHE(必须)
标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。

CACHE:a.csshttp://yanhaijing.com/a.css

NETWORK(可选)
这一部分是要绕过缓存直接读取的文件，可以使用通配符＊。
下面的代码 “login.asp” 永远不会被缓存，且离线时是不可用的：
NETWORK:login.asp

FALLBACK(可选)
指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

下面的例子中，如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。
FALLBACK:/html5/ /404.html

下面的例子中，则用 “404.html” 替代所有文件。
FALLBACK:*.html /404.html

​

离线缓存的优缺点

优点

减少服务器的负载，提高资源加载速度
离线浏览，用户可以在应用离线时使用
缺点

更新版本后，必须刷新一次才会启动新版本。

进入离线存储的页面，如果不更新版本，是会将其当成静态页面不请求。

无法进行灰度发布等策略

​

离线缓存与传统浏览器缓存区别：

离线缓存是针对整个应用，浏览器缓存是单个文件

离线缓存断网了还是可以打开页面，浏览器缓存不行

离线缓存可以主动通知浏览器更新资源