本地存储(localStorage、sessionStorage、web Database)
一、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)' ,[]);
三、将本地数据库中的数据提交到服务器端
<html xmlns="http://www.w3.org/1999/xhtml">
<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标签保存该字符串，传到后台，供服务器端调用，这里简写呢）
[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)的更多相关文章
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- 本地存储localStorage以及它的封装接口store.js的使用
本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布 0 推荐 9 收藏 ...
- 本地存储 localStorage
本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...
随机推荐
- servlet各版本区别以及dynamic web module 版本之间的区别
java的web系统有多种类型,比如静态的和动态的,然后动态的java web project要设置dynamic web module,也就是动态网页模型,他必须要喝对应的服务器搭配好了才能跑,今天 ...
- AWS系列-磁盘扩容
1 磁盘扩容 1.1 卷介绍 aws磁盘扩容有两个方式 1.购买新的磁盘,挂载到相应的目录 2.原来磁盘做快照,购买新的磁盘,选择恢复快照到硬盘上,这样相当于,从一块硬盘上50G升级到100G 说到a ...
- TypeScript 基本类型（一）
1.boolean 布尔值 true/false let isDone: boolean = false; 2.number 数字:和JavaScript 一样,TypeScript 里的所有数字都是 ...
- 一次显式GC导致的High CPU问题处理过程（转）
项目现场反馈系统出现性能问题,具体表现为:所有的客户端响应极其卡顿. 第一反应推测,难道是DB层面出现阻塞?检查v$session会话状态及等待类型未见异常,应该可以排除DB层面原因导致的可能. 继续 ...
- 【BZOJ3207】花神的嘲讽计划Ⅰ Hash+主席树
[BZOJ3207]花神的嘲讽计划Ⅰ Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: “哎你傻不傻的![hqz:大笨J]” “这道题又被J屎过了!!” “J这程序怎么跑这么快 ...
- Spring中 PROPAGATION_REQUIRED 解释
转自:https://blog.csdn.net/bigtree_3721/article/details/53966617 事务传播行为种类 Spring在TransactionDefinition ...
- 接口测试工具 — jmeter（数据库操作）
1.导入jdbc jar包 2.配置MySQL连接 3.执行sql语句
- shell正则式解析身份证和手机号
cat test2.html | sed -e 's/\(^\|[^0-9]\)\(13[0-9][0-9]\{8\}\|14[579][0-9]\{8\}\|15[0-3,5-9][0-9]\{8\ ...
- eclipse欺骗了我
Java源文件(.java)和Java的字节码文件(.class)跟 package 是个什么关系? 平时使用 eclipse 的时候,发现 .java 文件目录必须和 package 包名保持一致, ...
- linux c编程：互斥锁条件变量
条件变量:等待与信号发送 使用互斥锁虽然可以解决一些资源竞争的问题,但互斥锁只有两种状态(加锁和解锁),这限制了互斥锁的用途. 条件变量(条件锁)也可以解决线程同步和共享资源访问的问题,条件变量是对互 ...