详解HTML5 LocalStorage 当地存储

HTML5 storage提供了一种方法让网站可以或许把信息存储到你当地的计较机上，并再往后必要的时辰举办获取。这个观念和cookie相似，区别是它是为了更大容量存储计划的。Cookie的巨细是受限的，而且每次你哀求一个新的页面的时辰cookie城市被发送已往。HTML5的storage是存储在你的计较机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。起首天然是检测赏识器是否支持当地存储。在HTML5中，当地存储是一个window的属性，包罗localStorage和sessionStorage，从名字应该可以很清晰的识别二者的区别，前者是一向存在当地的，后者只是陪伴着session，窗口一旦封锁就没了。二者用法完全沟通，这里以localStorage为例。

if(window.localStorage){ alert('支持localStorage'); }else{ alert('不支持localStorage'); }

2.根基用法

存储数据的要领就是直接给window.localStorage添加一个属性，譬喻：window.localStorage.a 可能 window.localStorage["a"]。它的读取、写、删除操纵要领很简朴，是以键值对的方法存在的，如下：

localStorage.name = "kobi";//配置name为"kobi" localStorage["name"] = "koko";//配置name为"koko"，包围上面的值 localStorage.setItem("age","18");//配置age为"18" var a1 = localStorage["name"];//获取name的值 var a2 = localStorage.age;//获取age的值 var b = localStorage.getItem("name");//获取name的值 localStorage.removeItem("c");//破除c的值

这里最保举行使的天然是getItem()和setItem()，破除键值对行使removeItem()。假如但愿一次性破除全部的键值对，可以行使clear()。其它，HTML5还提供了一个key()要领，可以在不知道有哪些键值的时辰行使，如下：

var storage = window.localStorage; function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)得到响应的键，再用getItem()要领得到对应的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); } }

 3.营业需求

表单及时生涯数据，下次打开则提醒是否继承编辑。图片等控件不支持，只支持简朴的控件。【防备溘然断电或赏识器瓦解时，下次打开还可以继承编辑并生涯】。这样天然而然就想到了HTML5的当地存储成果。既然js写的烂，写的差，就当练手了。

其拭魅这些数据的生涯很简朴，无非就是一些简朴的标签数据的生涯。先来一个最简朴的js版本。

/** * 成果：生涯用户修改完form标签内容在LocalStorage中。 * 作者：黄金锋 * 版本：version 2.0 */ define(function () { //从localStorage中加载数据 function onload(form) { var fh = form_handler; var p = fh.getParams(form); if (!p.bimId || !p.formId || !p.iid) { return; } var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; //alert(id); var formDataDb; var allControl = $(form).find("input:text[name],textarea[name]"); //从当地取 var storage = localStorage.getItem(id); if (storage != null) { var myData = JSON.parse(storage); allControl.each(function (i, e) { var name = $(e).attr("name"); if (myData[name] != null) { $(e).val(myData[name]); $(e).change(); } }); } //绑定change变乱 allControl.each(function (i, el) { var name = $(el).attr('name'); if (name) { $(el).on('change', function () { onchange(this); }); } }); //生涯修改的数据 function onchange(el) { var storage = localStorage.getItem(id); if (storage == null) { formDataDb = new Object(); var key = $(el).attr("name"); var value = $(el).val(); formDataDb[key] = value; localStorage.setItem(id, JSON.stringify(formDataDb)); } else { var myData = JSON.parse(storage); var key = $(el).attr("name"); var value = $(el).val(); myData[key] = value; localStorage.setItem(id, JSON.stringify(myData)); } } }; //删除localStorage中的数据 function onsave(form) { var fh = form_handler; var p = fh.getParams(form); var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; localStorage.removeItem(id); var allGrid = $(form).find(".form-table"); var formId = $(form).data("formid"); allGrid.each(function (index,element) { var formName = $(element).find("input:hidden[data-formid]").attr("name"); var storageKey = "FORM_" + formId + "_" + formName; localStorage.removeItem(storageKey); }); } return { onload: onload, onsave: onsave, } });

表单都是自动通过模版天生的，这里附上表单加载必要的form.js.

代码太长，这里就不直接贴出来了，各人本身下载下来看吧 点击这里下载

4.Grid控件的数据生涯

Grid控件着实就是一个div，公司的一些页面表单都是动态天生的，表单上面的控件也是动态天生的，全部许多对象都是本技艺写的。下面是Grid控件的布局。

<div class="FM000103-SBCLBJ form-table "> <input data-datagrid="true" data-formid="FM000034" name="SBCLBJ" type="hidden" /> <input data-param="init" type="hidden" value="{&quot;ID&quot;:&quot;$[ID]&quot;,&quot;IID&quot;:&quot;$(autoid)&quot;}" /> <input data-param="initsame" type="hidden" value="[]" /> <div class="form-table-header"> <div style="width:48px;"> 编辑 </div> <div style="width:50px;"> 序号 </div> <div style="width:60px;"> 是否上传 </div> <div style="width:380px;"> 申报原料内容 </div> <div style="width:80px;"> 备注 </div> </div> <div class="form-table-body"> <table class="table-hover"> <colgroup span="6"> <col width="48" /> <col width="50" data-type="RowNumber" /> <col width="0" data-type="Label" data-index="ID" class="hidden" /> <col width="0" data-type="Label" data-index="IID" class="hidden" /> <col width="60" data-type="CheckBox" data-index="CDZL" /> <col width="380" data-type="TextArea" data-index="ATDESC" /> <col width="80" data-type="TextArea" data-index="BZ" /> </colgroup> <tbody> <tr> <td class="form-table-edit"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td> <td>1</td> <td class="hidden">BM00001141</td> <td class="hidden">4643</td> <td><input type="checkbox" value="1" checked="checked" /></td> <td>11111</td> <td>2222</td> </tr> <tr> <td class="form-table-edit"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></td> <td>2</td> <td class="hidden">BM00001141</td> <td class="hidden">4644</td> <td><input type="checkbox" value="0" /></td> <td>87789789789798789</td> <td>333</td> </tr> </tbody> </table> </div> <div class="form-table-footer"> <button type="button" class="btn add-row">新增</button> <button type="button" class="btn del-row">删除</button> </div> </div>

下面是完成Grid数据生涯的js.

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!