html5本地化开发,html5 本地化存储Web Storage详解

html5 本地化存储Web Storage

/**

* html5中新增web storage 本地化存储sessionStorage,localStorage,

* 可以替代以前的cookie。

* cookie 可以保存4kb的信息;

* cookie是随着http发送的，耗费一定的带宽;

* cookie除了添加，删除，设置有效期外，很难进行其他操作。

*

*

* sessionStorage: 一次会话有效,类似于servlet中的session;

* localStorage :可以存储到本地，永久保存。

*

*/

//保存数据

function saveData(){

var mail = document.getElementById("mail");

//将信息保存到session中

sessionStorage.setItem("mail",mail.value);

//将信息存储到本地

localStorage.setItem("email",mail.value);

}

//读取数据

function loadData(){

var msg = document.getElementById("msg");

//清除sessionStorage中的信息

sessionStorage.clear();

//从sessionStorage 中获取信息

var mail = sessionStorage.getItem("mail");

//从localStorage中获取信息

var email = localStorage.getItem("email");

msg.value=mail+" , "+email;

}

用户名:
年龄:
邮箱:

/**

* 模拟本地化存储

*/

function saveUser(){

var user = new Object;

//定义属性并赋值

user.username=document.getElementById("name").value;

user.age=document.getElementById("age").value;

user.mail = document.getElementById("em").value;

//将对象转化为json字符串

var data = JSON.stringify(user);

sessionStorage.setItem("user",data);

console.info("保存user对象成功..."+data);

}

function getUser(){

//获取到的JSON字符串

var user = sessionStorage.getItem("user");

var msg = document.getElementById("msg");

//将json字符串格式化为对象

//下面两种方法都可行

// var info =JSON.parse(user);

var info = eval('('+user+')');

var result = info.username+","+info.age+","+info.mail;

msg.value =result;

console

.info(user+","+info);//{"username":"23456","age":"wefr","mail":"fesdbg"},[object Object]

}

function saveUserToDB(){

var user = new Object();

user.username=document.getElementById("name").value;

user.age=document.getElementById("age").value;

user.mail = document.getElementById("em").value;

/**

* 类似嵌入式系统中的'SQLite'数据库,

* Firefox 35.0 不支持，

* chrome支持

* @type {Database}

*/

var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);

console.info("数据库信息:"+db);

db.transaction(function(tx){

//创建表

var sql='create table if not exists user(id int,name varchar(100),age int ,mail varchar(100) ) ';

tx.executeSql(sql);

});

db.transaction(function(tx){

//保存数据到数据库

tx.executeSql('insert into user values (1,?,?,?)',[user.username,user.age,user.mail],

//成功的回调函数

function(tx,msg){

console.info("执行sql语句成功:"+msg);

//失败的回调函数

},function(tx,msg){

console.info("执行sql语句失败:"+msg);

});

});

}

function getUserFromDB(){

//获取数据库

var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);

db.transaction(function(tx){

/**

* 执行查询

*/

tx.executeSql('select id,name,age,mail from user where id=?',[1],function(tr,msg){

/**

* 遍历结果集

*/

for (var i=0;i

//获取一条记录封装后的对象

//msg.rows.item(i).id ,--.name,--.mail获取指定的信息

console.info(msg.rows.item(i));

}

});

});

}