一、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)的更多相关文章

  1. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  2. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  3. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  4. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  6. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  7. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

  8. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  9. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

随机推荐

  1. 57、Design Support Library 介绍及环境搭建

    一.Material Design几个要素 扁平化.简洁: 水波反馈: 良好体验的过渡动画: 材料空间位置的直观变化: 二.Android Studio配置 在 build.gradle 文件中加入, ...

  2. 《ASP.NET 1200例》ref关键字与out关键字

    REF关键字 ref 关键字会导致通过引用传递的参数,而不是值. 通过引用传递的效果是在方法中对参数的任何改变都会反映在调用方的基础参数中. 引用参数的值与基础参数变量的值始终是一样的. 不要将“通过 ...

  3. JZOJ.5286【NOIP2017模拟8.16】花花的森林

    Description

  4. mac下面安装mysql

    参考http://www.cnblogs.com/lakeslove/p/6280404.html 关于msyql5.7,安装时最大的改变就是有了一个默认密码 我安装的是mysql-5.7.17-ma ...

  5. react 坑总结

    1.react可以在里面直接更改state的变量 例如: 2.react 数组循环

  6. delphi ----寻找控件，以字符串类型的名称控件

    vari :Integer;beginfor i := 1 to 10 do(FindComponent('Edit'+inttostr(i)) as TEdit).Text := inttostr( ...

  7. IOS And WCF 上传文件

    IOS And WCF Story 研究IOS上传到WCF图片的小功能,WCF实现服务端的文件上传的例子很多,单独实现IOS发送图片的例子也很多,但是两个结合起来的就很少了. 可以通过base64来上 ...

  8. visual studio 2017 编译v140 TRACKER : error TRK0005: Failed to locate: "CL.exe". 系统找不到指定的文件

    原因可能是vs2017中配置v140 的编译命令路径有问题 解决方案: 用vs2017的在线安装程序,选择修改 进去后选择单个组建,在编译器.生成工具和运行时里面把vc++2015.3…… 打钩的取消 ...

  9. Windows数据库定时备份

    首先打开:任务计划程序 右键任务计划程序库,选择创建基本任务 然后即可以按照实际情况逐步进行 直到启动程序--浏览(程序或脚本)时,这里本人导入的是backup.bat文件,文件内容为 @echo 设 ...

  10. Spring 框架的AOP之注解的方式

    1. 环境搭建 1.1 导入 jar 包 Spring 框架的基本开发包(6个); Spring 的传统AOP的开发包 spring-aop-4.3.10.RELEASE org.aopallianc ...