HTML5 Web Storage

2016年06月07日 HTML 暂无评论 阅读 21 views 次

Web Storage简单使用

在HTML5中重新提供了一种在客户端本地保存数据的功能,它就是Web Storage功能。Web Storage功能,就是在Web上存储数据的功能。具体来说,又分为两种:

  • sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
  • localStorage:将数据保存在客户端本地的硬件设备(通常指硬盘,但也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。

两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。使用sessionStorage时,如果关闭了浏览器,数据就会丢失;而使用localStorage时,即使浏览器关闭了,下次打开浏览器时仍然可以读取被保存的数据。但是,数据保存是按不同的浏览器分别进行的,也就是说,如果打开别的浏览器,是读取不到在这个浏览器中保存的数据的。

基本使用方法包括:

  • sessionStorage.setItem(key, value)、localStorage.setItem(key, value):在sessionStorage对象、localStorage对象中保存数据。
  • sessionStorage.getItem(key)、localStorage.getItem(key):读取保存在sessionStorage对象、localStorage对象中的主键为key的值。
  • sessionStorage.length、localStorage.length:所有保存在sessionStorage对象、localStorage对象中数据记录的条数。
  • sessionStorage.key(index)、localStorage.key(index):将想要得到数据的索引号作为index参数传入,可以得到sessionStorage对象、localStorage对象中与这个索引号对应的主键数据。

使用示例

示例所用页面代码:

Html代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" dir="ltr">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <title>Web Storage</title>
  7.     <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
  8.     <script type="text/javascript" src="../js/webStorage.js"></script>
  9.   </head>
  10.   <body>
  11.     <header> </header>
  12.     <aside> </aside>
  13.     <section>
  14.         <h1>sessionStorage和localStorage</h1>
  15.         <form name="sample01" id="sample01">
  16.             <label for="sTest">使用sessionStorage</label>
  17.             <input type="text" id="sTest" name="sTest"/>
  18.             <button type="button" id="saveBtn1">保存数据</button>
  19.             <button type="button" id="loadBtn1">读取数据</button><br/>
  20.             <label for="lTest">使用localStorage</label>
  21.             <input type="text" id="lTest" name="lTest"/>
  22.             <button type="button" id="saveBtn2">保存数据</button>
  23.             <button type="button" id="loadBtn2">读取数据</button>
  24.         </form>
  25.         <table>
  26.             <thead>
  27.                 <tr>
  28.                     <th>Key</th>
  29.                     <th>Value</th>
  30.                 </tr>
  31.             </thead>
  32.             <tbody></tbody>
  33.             <tfoot>
  34.                 <tr>
  35.                     <th>Total</th>
  36.                     <th>0</th>
  37.                 </tr>
  38.             </tfoot>
  39.         </table>
  40.     </section>
  41.     <footer>
  42.         <button type="button" id="clearBtn">清除</button>
  43.         <div id="console"></div>
  44.     </footer>
  45.   </body>
  46. </html>

JavaScript脚本代码如下:

Js代码  收藏代码
  1. $(function() {
  2.     var progressSave = function(storageObj, data) {
  3.         var current = (new Date()).getTime();
  4.         storageObj.setItem(current, data);
  5.     };
  6.     var insertRecord = function(key, value) {
  7.         $("<tr>").append($("<td>").text(key)).append($("<td>").text(value))
  8.                 .prependTo("tbody");
  9.     };
  10.     var progressLoad = function(storageObj) {
  11.         var length = storageObj.length;
  12.         var key = null;
  13.         var date = new Date();
  14.         for ( var i = 0; i < length; i++) {
  15.             key = storageObj.key(i);
  16.             date.setTime(key);
  17.             insertRecord(date.toLocaleString(), storageObj.getItem(key));
  18.         }
  19.         $("tfoot th:last").text($("tbody>tr").size());
  20.     };
  21.     $("#saveBtn1").click(function(event) {
  22.         progressSave(sessionStorage, $("#sTest").val());
  23.     });
  24.     $("#loadBtn1").click(function(event) {
  25.         progressLoad(sessionStorage);
  26.     });
  27.     $("#saveBtn2").click(function(event) {
  28.         progressSave(localStorage, $("#lTest").val());
  29.     });
  30.     $("#loadBtn2").click(function(event) {
  31.         progressLoad(localStorage);
  32.     });
  33.     $("#clearBtn").click(function(event) {
  34.         $("#console,tbody").empty();
  35.         $("tfoot th:last").text($("tbody>tr").size());
  36.     });
  37. });

作为简易数据库使用

保存数据流程

  1. 从各输入字段中获取数据;
  2. 创建对象,将获取的数据作为对象的属性进行保存;
  3. 将对象转换成JSON格式的文本数据;
  4. 将文本数据保存在localStorage对象或sessionStorage对象中。

为了将数据保存为一个对象,使用“new Object()”语句创建一个对象,将各种数据保存在该对象的各个属性中,然后,为了将对象转换成JSON格式的文本数据,使用了JSON对象的stringify()方法,使用方法如下:

Js代码  收藏代码
  1. var str = JSON.stringify(data);

该方法接受一个参数data,该参数表示要转换成JSON格式的文本数据的对象,该方法的作用是将对象转换成JSON格式的文本数据,并将其返回。

读取数据流程

  1. 从localStorage对象或sessionStorage对象中,将检索用的关键词作为key获取对应数据;
  2. 将获取的数据转换成为JSON对象;
  3. 取得JSON对象的各个属性值,创建要输出的内容;
  4. 将要输出的内容在页面上呈现出来。

这个过程的关键是使用JSON对象的parse()方法,将从localStorage对象或sessionStorage对象中获取的数据转换成JSON对象,使用方法如下:

Js代码  收藏代码
  1. var data = JSON.parse(str);

该方法接受一个参数str,此参数表示从localStorage对象或sessionStorage对象中取得的数据,该方法的作用是将传入的数据转换成JSON对象,并且将该对象返回。

使用示例

Js代码  收藏代码
  1. var save = function() {
  2.     var data = new Object();
  3.     data.name = $("#name").val();
  4.     data.email = $("#email").val();
  5.     data.tel = $("#tel").val();
  6.     var str = JSON.stringify(data);
  7.     localStorage.setItem(data.name, str);
  8. };
  9. var read = function() {
  10.     var key = $("#key").val();
  11.     var str = localStorage.getItem(key);
  12.     var data = JSON.parse(str);
  13.     // 呈现数据
  14. };

给我留言

您必须 登录 才能发表留言!