html5 本地存储 手机号码,html5本地存储

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) {//localStorage

alert("支持 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;iStorage事件监听。注意在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) { //localStorage

localStorage.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执行失败时调用的回调函数。