zoukankan      html  css  js  c++  java
  • 本地存储(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 () )事件,返回保存的结果。

  • 相关阅读:
    视频监控,硬盘录像机安装
    路由器、集线器和三层交换机有何不同
    九选六?九选三?
    Access数据转换为XML格式
    硬盘录像显示器显示画面有抖动感
    硬盘录像机开机监视一段时间后,显示器出现屏幕保护或者黑屏
    庆祝还活着
    天津之旅
    武汉之旅
    从今天起~~~
  • 原文地址:https://www.cnblogs.com/xiaolifeidao/p/3698889.html
Copyright © 2011-2022 走看看