分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

详解HTML5 LocalStorage 本地存储

HTML5   发布时间：2022-04-26  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了详解HTML5 LocalStorage 本地存储，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1.前言

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

支持localStorage');
}else{
 alert('不支持localStorage');
}
2.基本用法
存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
获取name的值
var a2 = localStorage.age;//获取age的值
var b = localStorage.getItem("name");//获取name的值
localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "
");
 }
}
 3.业务需求
表单实时保存数据，下次打开则提示是否继续编辑。图片等控件不支持，只支持简单的控件。【防止突然断电或浏览器崩溃时，下次打开还可以继续编辑并保存】。这样自然而然就想到了HTML5的本地存储功能。既然js写的烂，写的差，就当练手了。
详解HTML5 LocalStorage 本地存储
其实这些数据的保存很简单，无非就是一些简单的标签数据的保存。先来一个最简单的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控件的数据保存
详解HTML5 LocalStorage 本地存储
Grid控件其实就是一个div，公司的一些页面表单都是动态生成的，表单上面的控件也是动态生成的，所有很多东西都是自己手写的。下面是Grid控件的结构。
 
  
  
  
  
下面是完成Grid数据保存的js.
/**
 * 功能：保存用户修改完form标签内容在LocalStorage中。
 * 作者：黄金锋 (549387177@qq.com)
 * 日期：2015-11-111: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.LoginUser.UserId + '_' + 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.parse(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.parse(data);
if (myData != null) {
alert(data);
var Insert@R_211_10586@l = myData["@R_211_10586@l"]["Insert@R_211_10586@l"];
var Del@R_211_10586@l = myData["@R_211_10586@l"]["Del@R_211_10586@l"];
var update@R_211_10586@l = myData["@R_211_10586@l"]["update@R_211_10586@l"];
var trIIDIndex = myData["trIIDIndex"]["IID"];
if (Insert@R_211_10586@l > 0) {
for (var i = 0; i < inserttotal; i++) { var tr =""><><>');
td.addClass('form-table-edit');
}
else {
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('');
}
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("insert", truE);
ipt.change();
}
}
if (update@R_211_10586@l > 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);="" else="" ck.prop('checked', false);="" }="" else="" {="" 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.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);="" });="" localstorage.setitem("form_" + formid + "_isgriddata", null);="" }="" function ongridadd(form, table, data, tr) {="" var inputflag =" table.closest("div .form-table").find("input:hidden[data-formid]")" var storagekey;="" var formid =" $(form).data("formid");;" localstorage.setitem("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 insertobj =" { trIID: trIID, RowNumber: RowNumber };" var columnarr =" table.children().find("[data-index]");" if (columnarr) {="" columnarr.each(function (index, element) {="" var flag =" $(element).data("index");" insertobj[flag] =" data[flag];" }); ="" }="" if (inputflag && triid)="" {="" storagekey =" "FORM_" + formId + "_" + inputflag.attr("name");" var mydata =" "{'Insert':[{'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.parse(getLocalStorage);" var inserttotal =" dataObj["Total"]["InsertTotal"];"  ="" dataobj["insert"][inserttotal] =" InsertObj;" dataobj["total"]["inserttotal"] =" InsertTotal + 1;" localstorage.setitem(storagekey, json.stringify(dataobj));="" } else="" {="" var mydata =" { Total: { InsertTotal: 1, UpdateTotal: 0, DelTotal: 0 }, Insert: [InsertObj], Update: [], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };" localstorage.setitem(storagekey, json.stringify(mydata));="" }="" }="" }="" function ongridedit(form, table, data, tr) {=""  ="" var inputflag =" table.closest("div .form-table").find("input:hidden[data-formid]")" var formid =" $(form).data("formid");" var storagekey =" "FORM_" + formId + "_" + inputflag.attr("name");" localstorage.setitem("form_" + formid + "_isgriddata", "1");="" var mysourcedata =" {};" var triidindex;="" table.find("col").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;" }="" else="" {="" 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.parse(getLocalStorage);" var inserttotal =" dataObj["Total"]["InsertTotal"];" var updatetotal =" dataObj["Total"]["UpdateTotal"];" if (inserttotal =""> 0)//新增后在编辑
{
for (var i = 0; i < inserttotal; i++) { var row_data =" dataObj["Insert"][i];" if (row_data["triid"] ="= trIID) {" $.extend(dataobj["insert"][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.setitem(storagekey, json.stringify(dataobj));="" }="" else="" {="" var mydata =" { Total: { InsertTotal: 0, UpdateTotal: 1, DelTotal: 0 }, Insert: [], Update: [UpdateObj], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };" localstorage.setitem(storagekey, json.stringify(mydata));="" }="" var testdata =" localStorage.getItem(storageKey);" var mydata =" JSON.parse(testdata);" if (testdata !=" null) {" alert(testdata);="" alert(mydata);="" alert(mydata["total"]["inserttotal"]);="" alert(mydata["insert"][0]["id"]);="" }="" }="" function ongriddel(form, table, tr) {="" var inputflag =" table.closest("div .form-table").find("input:hidden[data-formid]")" var formid =" $(form).data("formid");" var storagekey =" "FORM_" + formId + "_" + inputflag.attr("name");;" localstorage.setitem("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.parse(getLocalStorage);" var isinsertdata =" false;" var isupdatedel =" false;" var inserttotal =" dataObj["Total"]["InsertTotal"];" var deltotal =" dataObj["Total"]["DelTotal"];" var updatetotal =" dataObj["Total"]["UpdateTotal"];" if (inserttotal =""> 0) {
for (var i = 0; i < inserttotal; i++) { var row_data =" dataObj["Insert"][i];" if (row_data["triid"] ="= trIID) {" isinsertdata =" true;" dataobj["insert"][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 (isinsertdata)="" {="" var temparr =" [];" for (var i ="">< inserttotal; i++) { if (dataobj["insert"][i] !=" null) {" temparr[i]="dataObj["Insert"][i];" }="" }="" dataobj["insert"] =" tempArr;" dataobj["total"]["inserttotal"] =" InsertTotal - 1;" }="" else="" {="" if (isupdatedel)="" {="" var temparr =" [];" for (var i ="">< inserttotal; 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.setitem(storagekey, json.stringify(dataobj));="" if (dataobj["total"]["inserttotal"] ="= 0 && dataObj["Total"]["UpdateTotal"] == 0 && dataObj["Total"]["DelTotal"] == 0)" {="" localstorage.setitem("form_" + formid + "_isgriddata", null);="" }="" } else="" {="" var mydata =" { Total: { InsertTotal: 0, UpdateTotal: 0, DelTotal: 1 }, Insert: [], Update: [], Del: [DelObj], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };" localstorage.setitem(storagekey, json.stringify(mydata));="" }="" }="" return {="" onload: onload,="" onsave: onsave,="" ongridadd: ongridadd,="" ongridedit: ongridedit,="" ongriddel: ongriddel="" }="">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
大佬总结

       
以上是大佬教程为你收集整理的详解HTML5 LocalStorage 本地存储全部内容，希望文章能够帮你解决详解HTML5 LocalStorage 本地存储所遇到的程序开发问题。

		
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。


				
			

			
标签：LocalStorage本地存储

	

	

		 
	

    
    

       
	

    

	

		
猜你在找的HTML5相关文章

		 
	
      
    
    

			
其他相关热搜词更多

			
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap