首页 > 代码库 > 本地存储(localStorage、sessionStorage、web Database)

本地存储(localStorage、sessionStorage、web Database)

2024-07-02 01:41:08   233人阅读

    一、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
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src=http://www.mamicode.com/"Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"提交"/>
       <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 = http://www.mamicode.com/serializer.ReadObject(stream1) as Data;
                    }
                }
            }
        }
    }

 上面就是将input保存的数据进行解析，然后保存至数据库中，这里我写了一部分，后面存入数据库中未完成。

 这部操作完了，就会触发前端的$(function () )事件，返回保存的结果。

 


联系
我们