html5存储原理,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。

未完待续...

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 = "

查询记录条数: " + len + "

";

document.querySelector('#status').innerHTML += msg;

for (i = 0; i < len; i++){

alert(results.rows.item(i).name );

}

}, null);

});

4、IndexedDB

H5之前

主要使用cookies

数据大小：作为存储容器，cookie的大小限制在4KB左右。

安全性问题：由于在HTTP请求中的cookie是明文传递，有安全性隐患。

网络负担：cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。

兼容问题：

本地存储是H5的新贵，但是对于老、旧的浏览器来说怎么办？那就不用老古董浏览器呗，或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的，在其他编译型的语言看来，存储字符串能做些什么，但在JavaScript身上，旧大放光彩，可以存储JSON格式的字符串来扩展应用，可以存储类名变量值等等信息再通过eval()来感受使用JS的快感。既然localStorage是存储字符串的，那么在老古董浏览器上，可以通过使用Cookies来做替代方案并做好域内安全。