一、sessionStorage和localStorage
sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据。不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据。如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据。但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别的数据,就会读取不到在这个浏览器中保存的数据。
1.设置数据
localStorage.setItem(key,value);
sessionStorage.setItem(key,value);
2.读取数据
localStorage.getItem(key);
sessionStorage.getItem(key);
3.删除数据
localStorage.removeItem(key);
sessionStorage.removeItem(key);
二、web Database
SQLLite的文件型SQL数据库能将用户输入的数据保存到客户端的本地数据库中;
1.新建数据库
var db=openDatabase(‘mydb‘,‘1.0‘,‘Test DB‘,2*1024*1024);
第一个参数为数据库名,第二个参数为版本号,第三个参数为数据库名,第四个为数据库的大小;
2.操作数据库executeSql方法
transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
第一个参数为需要执行的SQL语句,第二个参数为SQL语句中所有使用的参数的数组,第三个为执行SQL语句成功时调用的回调函数,第四个参数为SQL语句失败时调用的毁掉函数。
2.1添加数据
tx.executeSql(‘INSERT INTO myTable VALUES(?,?,?)‘,[value1,value2,value3],function(tx,rs),function(tx,error));
2.2修改数据
tx.executeSql(‘update myTable set field1=?,field2=?,field3=? where field4=?‘ [value1,value2,value3,value4],function(tx,rs),function(tx,error));
2.3删除数据
tx.executeSql(‘delete from myTable where field1=?‘ [value1],function(tx,rs),function(tx,error));
2.4创建数据
tx.executeSql(‘CREATE TABLE IF NOT EXISTS myTable(field1 TEXT,field2 TEXT)‘ ,[]);
三、将本地数据库中的数据提交到服务器端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<head runat= "server" >
<title></title>
<script src= "Scripts/jquery-1.4.1.js"
type= "text/javascript" ></script>
<script src= "Scripts/jquery-1.4.1-vsdoc.js"
type= "text/javascript" ></script>
<script type= "text/javascript" >
$(function () {
<% if (postFlag){%>
alert( "dddd" );
<%}%>
});
function btnSubmit_onclick() {
$( "#JsonText" ).val( "ddddddddddddddddddddddddddddddddddddddddddssss" );
form1.submit();
}
</script>
</head> <body> <form id= "form1"
runat= "server" >
<div>
<input type= "button"
id= "btnSubmit"
onclick= "btnSubmit_onclick();"
value= "提交" />
<input type= "hidden"
id= "JsonText"
name= "JsonText"
/>
</div>
</form>
</body> </html> |
点击"提交"按钮,就将本地数据中的的数据提交到服务端(这里前端提交按钮触发的事件本是组装本地数据库中内容,然后通过input标签保存该字符串,传到后台,供服务器端调用,这里简写呢)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
[DataContract] public
class Data
{
[DataMember]
public
string Code { get ; set ; }
}
public
bool postFlag = false ;
protected
void Page_Load( object
sender, EventArgs e)
{
if
(Page.IsPostBack)
{
postFlag = true ;
string
str = Request.Form[ "JsonText" ].ToString();
byte [] buffer = Encoding.UTF8.GetBytes(str);
DataContractSerializer serializerArray = new
DataContractSerializer( typeof (ArrayList));
DataContractSerializer serializer = new
DataContractSerializer( typeof (Data));
using
(MemoryStream stream = new
MemoryStream(buffer))
{
ArrayList dataArray = serializerArray.ReadObject(stream) as
ArrayList;
for
( int
i = 0; i < dataArray.Count; i++)
{
str = dataArray[i].ToString();
buffer = Encoding.UTF8.GetBytes(str);
using
(MemoryStream stream1 = new
MemoryStream(buffer))
{
Data myData = serializer.ReadObject(stream1) as
Data;
}
}
}
}
}
|
上面就是将input保存的数据进行解析,然后保存至数据库中,这里我写了一部分,后面存入数据库中未完成。
这部操作完了,就会触发前端的$(function () )事件,返回保存的结果。
本地存储(localStorage、sessionStorage、web Database),布布扣,bubuko.com