详解HTML5 LocalStorage 本地存储

1.前言

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

2.基本用法

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

这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

");
 }
}

 3.业务需求

表单实时保存数据,下次打开则提示是否继续编辑。图片等控件不支持,只支持简单的控件。【防止突然断电或浏览器崩溃时,下次打开还可以继续编辑并保存】。这样自然而然就想到了HTML5的本地存储功能。既然js写的烂,写的差,就当练手了。

其实这些数据的保存很简单,无非就是一些简单的标签数据的保存。先来一个最简单的js版本。

表单都是自动通过模版生成的,这里附上表单加载需要的form.js.

代码太长,这里就不直接贴出来了,大家自己下载下来看吧 点击这里下载

4.Grid控件的数据保存

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 InsertTotal = myData["Total"]["InsertTotal"];
var DelTotal = myData["Total"]["DelTotal"];
var UpdateTotal = myData["Total"]["UpdateTotal"];
var trIIDIndex = myData["trIIDIndex"]["IID"];
if (InsertTotal > 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 (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);
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 = 0; 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 = 0; 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
}
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法