HTML5存储总结
h5的存储方式有如下几种
1、web storage
- 本地存储local storage
- 本地存储session storage
2、离线缓存（application cache）
3、Web SQL
4、IndexedDB
1、web storage
存储形式：key-->value
存储内容：数组、json、图片、脚本、样式等可以序列化为字符串的内容
使用场景：利用本地数据，减少网络传输，弱网高延迟低带宽，尽量数据本地化
大小限制：每个域名5M
** 本地存储local storage - 没有时间限制的数据存储 **
域内安全、永久保存，除非手动删除
if(typeof(Storage) !== "undefined") {
// localStorage.setItem(键名，键值) 存储数据信息到本地
// localStorage.getItem(键名) 读取本地存储的信息
// localStorage.removeItem(键名) 删除本地存储的信息
// localStorage.clear() 清空所有存储的信息
var value = "张三";
//存储
localStorage.setItem("key", value);
//取值
var name = localStorage.getItem("key");
console.log(name);
//删除
localStorage.removeItem("key");
//清空localStorage信息
localStorage.clear()
} else {
console.log("浏览器不支持web Storage")
}
** 本地存储session storage - 针对一个 session 的数据存储 **
短期保存，重启浏览器、关闭页面或新开页面时失效
if(typeof(Storage) !== "undefined") {
//sessionStorage.setItem(键名，键值) 存储数据信息到本地
//sessionStorage.getItem(键名) 读取本地存储的信息
//sessionStorage.removeItem(键名) 删除本地存储的信息
//sessionStorage.clear () 清空所有存储的信息
var value = "张三";
//存储
se.setItem("key", value);
//取值
var name = localStorage.getItem("key");
console.log(name);
//删除
localStorage.removeItem("key");
//清空localStorage信息
localStorage.clear()
} else {
console.log("浏览器不支持web Storage")
}
2、离线缓存（application cache）
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
未完待续...
请参考
http://www.w3school.com.cn/html5/html_5_app_cache.asp
3、Web SQL
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作
核心方法：
- openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
- executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调
执行查询操作：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});
插入数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
读取数据：
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});
具体代码可参考我的另一篇关于数据库文章
链接如下：
http://www.jianshu.com/p/ba69532c0b00
4、IndexedDB
http://www.cnblogs.com/dolphinX/p/3415761.html
http://www.cnblogs.com/dolphinX/p/3416889.html
H5之前
主要使用cookies
数据大小：作为存储容器，cookie的大小限制在4KB左右。
安全性问题：由于在HTTP请求中的cookie是明文传递，有安全性隐患。
网络负担：cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。
兼容问题：
本地存储是H5的新贵，但是对于老、旧的浏览器来说怎么办？那就不用老古董浏览器呗，或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的，在其他编译型的语言看来，存储字符串能做些什么，但在JavaScript身上，旧大放光彩，可以存储JSON格式的字符串来扩展应用，可以存储类名变量值等等信息再通过eval()来感受使用JS的快感。既然localStorage是存储字符串的，那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。
