详解HTML5 LocalStorage 本地存储

1.前言

html5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。html5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过javascript来获取这些数据。首先自然是检测浏览器是否支持本地存储。在html5中，本地存储是一个window的属性，包括localstorage和ssionstorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着ssion，窗口一旦关闭就没了。二者用法完全相同，这里以localstorage为例。

if(window.localstorage){ alert('支持localstorage');}el求职简历模版{ alert('不支持localstorage');}

2.基本用法

存储数据的方法就是直接给window.localstorage添加一个属性，例如：window.localstorage.a 或者 window.localstorage[“a”]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：

localstorage.name = "kobi";//设置name为"kobi"localstorage["name"] = "koko";//设置name为"koko"，覆盖上面的值localstorage.titem("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()和titem()，清除键值对使用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.loginur.urid + '_' + 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.par(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.titem(id, json.stringify(formdatadb));            } el {                var mydata = json.par(storage);                var key = $(el).attr("name");                var value = $(el).val();                mydata[key] = value;                localstorage.titem(id, json.stringify(mydata));            }        }    };    //删除localstorage中的数据    function onsave(form) {        var fh = form_handler;        var p = fh.getparams(form);        var id = 'form_' + dci.loginur.urid + '_' + 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.

/*** 功能：保存用户修改完form标签内容在localstorage中。* 作者：黄金锋 (549387177@qq.com)* 日期：2015-11-1  11:14:01* 修改：2015-11-19 16:09:00* 版本：version 3.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.loginur.urid + '_' + p.bimid + '_' + p.formid + '_' + p.iid;var formdatadb;var allcontrol = $(form).find("input:text[name],textarea[name]");//从本地取var storage = localstorage.getitem(id);if (storage != null){if (confirm("是否加载缓存数据")) {var mydata = json.par(storage);allcontrol.each(function (i, e) {var name = $(e).attr("name");if (mydata[name] != null) {$(e).val(mydata[name]);$(e).change();}});}}var allgrid = $(form).find(".form-table");var formid = $(form).data("formid");var formstorage= localstorage.getitem("form_" + formid + "_isgriddata");if (formstorage=="1"){if (confirm("是否加载grid缓存数据")){//给grid控件赋值allgrid.each(function (index, element) {var formname = $(element).find("input:hidden[data-formid]").attr("name");var ipt = $(element).find("input[name]");var table = $(element).find("input:hidden[data-formid]").siblings(".form-table-body").find(".table-hover");var storagekey = "form_" + formid + "_" + formname;var data = localstorage.getitem(storagekey);var mydata = json.par(data);if (mydata != null) {alert(data);var inrttotal = mydata["total"]["inrttotal"];var deltotal = mydata["total"]["deltotal"];var updatetotal = mydata["total"]["updatetotal"];var triidindex = mydata["triidindex"]["iid"];if (inrttotal > 0) {for (var i = 0; i < inrttotal; i++) {var tr = $('<tr></tr>');var row_data = mydata["inrt"][i];table.find('colgroup col').each(function (idx, el) {var td = $('<td></td>');if (idx == 0) {td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>');td.addclass('form-table-edit');}el {var index = $(el).data('index');var type = $(el).data('type')if (type == "rownumber") {var val = row_data["rownumber"];td.html(val);}if (type == "checkbox") {var val = row_data[index];td.append('<input type="checkbox" value="' + val + '" ' + (val == '1' ? 'checked="checked"' : '') + ' />');}if (index && type != "checkbox") {td.html(row_data[index]);}}if ($(el).attr('width') == '0')td.addclass('hidden');td.appendto(tr);});//table.find("tbody").append(tr);table.append(tr);tr.data("inrt", true);ipt.change();}}if (updatetotal > 0) {for (var i = 0; i < updatetotal; i++) {var row_data = mydata["update"][i];var triid = row_data["triid"];var trindex;table.find("tr").each(function (idx, ele){var iid = $(ele).find("td").eq(triidindex).html();if (iid == triid) {trindex = idx;}});var cells = table.find("tr").eq(trindex);table.find('colgroup col').each(function (idx, el){var index = $(el).data('index');if (index){var td = cells.find("td").eq(idx);var type = $(el).data('type');var test =new object();var text = row_data[index];if (type == 'checkbox'){var ck = td.find('input[type="checkbox"]');if (text == '1')ck.prop('checked', true);elck.prop('checked', fal);}el{td.text(text);}}});cells.data("update", true);ipt.change();}}if (deltotal > 0) {for (var i = 0; i < deltotal; i++) {var row_data = mydata["del"][i];var triid = row_data["triid"];table.find("tr").each(function (idx,ele) {var iid = $(ele).find("td").eq(triidindex).html();if ( iid== triid){$(this).css("display", "none");$(this).data("delete", true);ipt.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.titem(id, json.stringify(formdatadb));} el {var mydata = json.par(storage);var key = $(el).attr("name");var value = $(el).val();mydata[key] = value;localstorage.titem(id, json.stringify(mydata));}}};//删除localstorage中的数据function onsave(form) {var fh = form_handler;var p = fh.getparams(form);var id = 'form_' + dci.loginur.urid + '_' + 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);});localstorage.titem("form_" + formid + "_isgriddata", null);}function ongridadd(form, table, data, tr) {var inputflag = table.clost("div .form-table").find("input:hidden[data-formid]")var storagekey;var formid = $(form).data("formid");;localstorage.titem("form_" + formid + "_isgriddata", "1");var rownumber = table.find(".active").children().eq(1).html();var triidindex;var triid;table.find("col").each(function (idx, ele) {if ($(ele).data("index") == "iid") {triid = table.find(".active").children().eq(idx).html();triidindex = idx;}});var inrtobj = { triid: triid, rownumber: rownumber };var columnarr = table.children().find("[data-index]");if (columnarr) {columnarr.each(function (index, element) {var flag = $(element).data("index");inrtobj[flag] = data[flag];}); }if (inputflag && triid){storagekey = "form_" + formid + "_" + inputflag.attr("name");//var mydata = "{'inrt':[{'triid':'1','id':'test','iid':'测试'},{'triid':'2','id':'test2','iid':'测试2'}],'update':[{'triid':'3','id':'test3','iid':'测试3'},{'triid':'4'圣诞礼物送什么好,'id':'test4','iid':'测试4'}],'del':[{'triid':'1'},{'triid':'2'}]}";var getlocalstorage = localstorage.getitem(storagekey);if (getlocalstorage) {var dataobj = json.par(getlocalstorage);var inrttotal = dataobj["total"]["inrttotal"];dataobj["inrt"][inrttotal] = inrtobj;dataobj["total"]["inrttotal"] = inrttotal + 1;localstorage.titem(storagekey, json.stringify(dataobj));} el{var mydata = { total: { inrttotal: 1, updatetotal: 0, deltotal: 0 }, inrt: [inrtobj], update: [], del: [], notes: { storagekey: storagekey }, triidindex: { iid: triidindex } };localstorage.titem(storagekey, json.stringify(mydata));}}}function ongridedit(form, table, data, tr) {var inputflag = table.clost("div .form-table").find("input:hidden[data-formid]")var formid = $(form).data("formid");var storagekey = "form_" + formid + "_" + inputflag.attr("name");localstorage.titem("form_" + formid + "_isgriddata", "1");var mysourcedata = {};var triidindex;table.find("co单反相机什么牌子好l").each(function (idx, ele){var index = $(ele).data("index");var type = $(ele).data("type");if (index){if (type == "checkbox"){var val = table.find(".active").children().eq(idx).html();var value =$(val).val();mysourcedata[index] = value;}el{if (index == "iid"){triidindex = idx;}mysourcedata[index] = table.find(".active").children().eq(idx).html();}}});var triid = mysourcedata["iid"];var updateobj = { triid: triid };$.extend(updateobj, mysourcedata);var getlocalstorage = localstorage.getitem(storagekey);if (getlocalstorage){var dataobj = json.par(getlocalstorage);var inrttotal = dataobj["total"]["inrttotal"];var updatetotal = dataobj["total"]["updatetotal"];if (inrttotal > 0)//新增后在编辑{for (var i = 0; i < inrttotal; i++) {var row_data = dataobj["inrt"][i];if (row_data["triid"] == triid) {$.extend(dataobj["inrt"][i], updateobj);}}}if (updatetotal > 0)//编辑之后在编辑{for (var i = 0; i < updatetotal; i++) {var row_data = dataobj["update"][i];if (row_data["triid"] == triid) {$.extend(dataobj["update"][i], updateobj);}}}var updatetotal = dataobj["total"]["updatetotal"];dataobj["update"][updatetotal] = updateobj;dataobj["total"]["updatetotal"] = updatetotal + 1;localstorage.titem(storagekey, json.stringify(dataobj));}el{var mydata = { total: { inrttotal: 0, updatetotal: 1, deltotal: 0 }, inrt: [], update: [updateobj], del: [], notes: { storagekey: storagekey }, triidindex: { iid: triidindex } };localstorage.titem(storagekey, json.stringify(mydata));}var testdata = localstorage.getitem(storagekey);var mydata = json.par(testdata);if (testdata != null) {alert(testdata);//alert(mydata);//alert(mydata["total"]["inrttotal"]);//alert(mydata["inrt"][0]["id"]);}}function ongriddel(form, table, tr) {var inputflag = table.clost("div .form-table").find("input:hidden[data-formid]")var formid = $(form).data("formid");var storagekey = "form_" + formid + "_" + inputflag.attr("name");;localstorage.titem("form_" + formid + "_isgriddata", "1");var triidindex;var triid;table.find("col").each(function (idx, ele) {if ($(ele).data("index") == "iid"){triidindex = idx;triid = tr.find("td").eq(idx).html();}});var delobj = { triid: triid };var getlocalstorage = localstorage.getitem(storagekey);if (getlocalstorage) {var dataobj = json.par(getlocalstorage);var isinrtdata = fal;var isupdatedel = fal;var inrttotal = dataobj["total"]["inrttotal"];var deltotal = dataobj["total"]["deltotal"];var updatetotal = dataobj["total"]["updatetotal"];if (inrttotal > 0) {for (var i = 0; i < inrttotal; i++) {var row_data = dataobj["inrt"][i];if (row_data["trii一畦春韭绿d"] == triid) {isinrtdata = true;dataobj["inrt"][i] = null;}}}if (updatetotal>0){for (var i = 0; i < updatetotal; i++) {var row_data = dataobj["update"][i];if (row_data["triid"] == triid) {isupdatedel = true;dataobj["update"][i] = null;}}}if (isinrtdata){var temparr = [];for (var i = 0; i < inrttotal; i++) {if (dataobj["inrt"][i] != null) {temparr[i]=dataobj["inrt"][i];}}dataobj["inrt"] = temparr;dataobj["total"]["inrttotal"] = inrttotal - 1;}el{if (isupdatedel){var temparr = [];for (var i = 0; i < inrttotal; i++) {if (dataobj["update"][i] != null) {temparr[i] = dataobj["update"][i];}}dataobj["update"] = temparr;dataobj["total"]["updatetotal"] = updatetotal - 1;} dataobj["del"][deltotal] = delobj;dataobj["total"]["deltotal"] = deltotal + 1;}localstorage.titem(storagekey, json.stringify(dataobj));if (dataobj["total"]["inrttotal"] == 0 && dataobj["total"]["updatetotal"] == 0 && dataobj["total"]["deltotal"] == 0){localstorage.titem("form_" + formid + "_isgriddata", null);}} el{var mydata = { total: { inrttotal: 0, updatetotal: 0, deltotal: 1 }, inrt: [], update: [], del: [delobj], notes: { storagekey: storagekey }, triidindex: { iid: triidindex } };localstorage.titem(storagekey, json.stringify(mydata));}}return {onload: onload,onsave: onsave,ongridadd: ongridadd,ongridedit: ongridedit,ongriddel: ongriddel}});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。