html5本地存储

来源：互联网发布：剑灵捏脸数据收费怎办编辑：程序博客网时间：2024/06/06 05:26

h5中提供了一种将键值对的数据保存在客户端的标准。跟cookie不同的是，它不会在每次请求服务器的时候上传至服务器(除非你自己实现该功能)，因为这是h5的规范得到了浏览器的很好支持，不需额外的插件之类，h5提供了更大容量的数据存储空间(h5的建议是每个网站提供5M的存储空间)，比cookie的4KB大太多。

h5中提供了两种本地存储机制，一种是存储键值对数据的Web Storage，另外一种是类似数据库形式存储数据的Web SQL Database。

Web Storage

Web Storage提供了两种存储类型的API接口:sessionStorage和localStorage。sessionStorage在会话期间内有效，窗口关闭就没了。localStorage存储在本地，数据永久存储(除非用户或者程序执行删除操作)。两者在用法上完全一致。h5是域内安全的，在该域内的所有页面都可以访问数据。

检测浏览器的支持情况(以localStorage为例)。

if (window.localStorage) {//localStoragealert("支持 localStorage")}else{alert("不支持 localStorage")}

操作本地数据,需要注意的是h5只能存储字符串，任何格式存储的时候都会自动转为字符串。

//添加/修改 键值对localStorage.itemA = "itemA";var itmeB = "itmeB";localStorage[itmeB] = "itmeB";var itmeC = "itmeC";localStorage.setItem(itmeC, "itemC")//获取键值对var valueA=localStorage.itemA;var valueB=localStorage[itmeB];var valueC=localStorage.getItem(itmeC);//索引 小标从0开始var key=localStorage.key(0);//删除某个值localStorage.removeItem(itmeB);//清空localStorage.clear();

也可以存储Json数据。将json转为字符串形式存储，需要的时候取出来转为原来的类型。

var jsonString=JSON.stringify(json);var json=JSON.parse(jsonString);

遍历所有存储数据。

var showTxt="";var local=window.localStorage;for(var i=0;i<local.length;i++){showTxt+=local.key(i)+ " : " + local.getItem(local.key(i));}alert(showTxt);

Storage事件监听。注意在google浏览器上在本页面修改数据不会触发storage事件，在其他页面修改时才会触发。

window.onload = function() {if (window.attachEvent) {window.attachEvent("storage", storageData);} else if (window.addEventListener) {window.addEventListener("storage", storageData, false);}}function onClick() {if (window.localStorage) { //localStoragelocalStorage.setItem("itmeA", "PageTwo")} else {alert("不支持 localStorage")}};function storageData(e) {var txt = document.getElementById("test_a");txt.text = e.toString();};

Web SQL Database

对于复杂数据结构的数据，我们还是需要数据库来存储数据。h5允许我们直接通过js的API在浏览器创建一个本地SQLITE数据库，支持标准SQL的的CRUD操作。

操作的基本步骤：

1.创建本地数据库。

2.开启事务，然后在事务中执行数据库操作。

openDatabase()

dataBase = openDatabase("demo.db", "1.0", "no", 1024 * 1024, function () { });

获取或者创建一个数据库，如果数据库不存在就创建。

需要传入的参数:

1.数据库名称

2.数据库版本号

3.对数据库描述

4.分配的数据库大小(单位:KB)

5回调函数(可省略)

transaction()

transaction(function());

开启事务，对于数据库的操作我们放在它的参数中处理。

executeSql()

executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

指定sql语句。dataHandler是调用成功的回调函数，通过该函数可以获取查询的结果集。errorHandler执行失败时调用的回调函数。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet" /><script type="text/javascript" charset="utf-8">var dataBase;window.onload = function() {dataBase = openDatabase("TestDB.db", "1.0", "MyDB", 1024 * 1024, function() {});}function operateSqlData() {dataBase.transaction(function(context) {context.executeSql('CREATE TABLE IF NOT EXISTS userTable (_iD unique primary key, uName)');context.executeSql('INSERT INTO userTable (_iD, uName) VALUES (2, "ZHAGN SAN")');context.executeSql('SELECT * FROM userTable', [], function(context, results) {var rowLen = results.rows.length;console.log('rowLen: ' + rowLen);for (var i = 0; i < rowLen; i++) {console.log('_iD: ' + results.rows.item(i)._iD);console.log('uName: ' + results.rows.item(i).uName);}});});}</script></head><body><a onclick="operateSqlData()">点击</a></body></html>

0 0