-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
诗诗
2018-03-12
来源 ：网络
阅读 960
评论 0
摘要： HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这篇HTML5教程将详解这个问题。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。
1.前言
HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这篇HTML5教程将详解这个问题。这个概念和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版本。
1 /** 2 * 功能：保存用户修改完form标签内容在LocalStorage中。 3 * 作者：黄金锋 (549387177@qq.com) 4 * 日期：2015-11-1 11:14:01 5 * 修改：2015-11-11 16:09:00 6 * 版本：version 2.0 7 */ 8 9 define(function () {10 11 //从localStorage中加载数据12 function onload(form) {13 14 var fh = form_handler;15 var p = fh.getParams(form);16 if (!p.bimId || !p.formId || !p.iid) {17 return;18 }19 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid;20 //alert(id);21 22 var formDataDb;23 var allControl = $(form).find("input:text[name],textarea[name]");24 25 //从本地取26 var storage = localStorage.getItem(id);27 if (storage != null) {28 var myData = JSON.parse(storage);29 allControl.each(function (i, e) {30 var name = $(e).attr("name");31 if (myData[name] != null) {32 $(e).val(myData[name]);33 $(e).change();34 }35 });36 }37 38 39 //绑定change事件40 allControl.each(function (i, el) {41 var name = $(el).attr('name');42 if (name) {43 $(el).on('change', function () {44 onchange(this);45 });46 }47 });48 49 //保存修改的数据50 function onchange(el) {51 var storage = localStorage.getItem(id);52 if (storage == null) {53 formDataDb = new Object();54 var key = $(el).attr("name");55 var value = $(el).val();56 formDataDb[key] = value;57 localStorage.setItem(id, JSON.stringify(formDataDb));58 } else {59 var myData = JSON.parse(storage);60 var key = $(el).attr("name");61 var value = $(el).val();62 myData[key] = value;63 localStorage.setItem(id, JSON.stringify(myData));64 }65 }66 };67 68 //删除localStorage中的数据69 function onsave(form) {70 var fh = form_handler;71 var p = fh.getParams(form);72 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid;73 localStorage.removeItem(id);74 75 var allGrid = $(form).find(".form-table");76 var formId = $(form).data("formid");77 allGrid.each(function (index,element) {78 var formName = $(element).find("input:hidden[data-formid]").attr("name");79 var storageKey = "FORM_" + formId + "_" + formName;80 localStorage.removeItem(storageKey);81 });82 }83 84 return {85 onload: onload,86 onsave: onsave,87 }88 });
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="{"ID":"$[ID]","IID":"$(autoid)"}" />
<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.
1 /** 2 * 功能：保存用户修改完form标签内容在LocalStorage中。 3 * 作者：黄金锋 (549387177@qq.com) 4 * 日期：2015-11-1 11:14:01 5 * 修改：2015-11-19 16:09:00 6 * 版本：version 3.0 7 */ 8 9 define(function () { 10 11 //从localStorage中加载数据 12 function onload(form) { 13 14 var fh = form_handler; 15 var p = fh.getParams(form); 16 if (!p.bimId || !p.formId || !p.iid) { 17 return; 18 } 19 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid; 20 21 var formDataDb; 22 var allControl = $(form).find("input:text[name],textarea[name]"); 23 24 //从本地取 25 var storage = localStorage.getItem(id); 26 if (storage != null) 27 { 28 if (confirm("是否加载缓存数据")) { 29 30 var myData = JSON.parse(storage); 31 allControl.each(function (i, e) { 32 var name = $(e).attr("name"); 33 if (myData[name] != null) { 34 $(e).val(myData[name]); 35 $(e).change(); 36 } 37 }); 38 } 39 } 40 41 var allGrid = $(form).find(".form-table"); 42 var formId = $(form).data("formid"); 43 var formStorage= localStorage.getItem("FORM_" + formId + "_isGridData"); 44 if (formStorage=="1") 45 { 46 if (confirm("是否加载Grid缓存数据")) 47 { 48 //给Grid控件赋值 49 allGrid.each(function (index, element) { 50 var formName = $(element).find("input:hidden[data-formid]").attr("name"); 51 var ipt = $(element).find("input[name]"); 52 var table = $(element).find("input:hidden[data-formid]").siblings(".form-table-body").find(".table-hover"); 53 var storageKey = "FORM_" + formId + "_" + formName; 54 var data = localStorage.getItem(storageKey); 55 var myData = JSON.parse(data); 56 if (myData != null) { 57 alert(data); 58 var InsertTotal = myData["Total"]["InsertTotal"]; 59 var DelTotal = myData["Total"]["DelTotal"]; 60 var UpdateTotal = myData["Total"]["UpdateTotal"]; 61 var trIIDIndex = myData["trIIDIndex"]["IID"]; 62 if (InsertTotal > 0) { 63 for (var i = 0; i < InsertTotal; i++) { 64 var tr = $('<tr></tr>'); 65 var row_data = myData["Insert"][i]; 66 table.find('colgroup col').each(function (idx, el) { 67 var td = $('<td></td>'); 68 if (idx == 0) { 69 td.append('<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>'); 70 td.addClass('form-table-edit'); 71 } 72 else { 73 var index = $(el).data('index'); 74 var type = $(el).data('type') 75 if (type == "RowNumber") { 76 var val = row_data["RowNumber"]; 77 td.html(val); 78 } 79 if (type == "CheckBox") { 80 var val = row_data[index]; 81 td.append('<input type="checkbox" value="' + val + '" ' + (val == '1' ? 'checked="checked"' : '') + ' />'); 82 } 83 if (index && type != "CheckBox") { 84 td.html(row_data[index]); 85 } 86 } 87 if ($(el).attr('width') == '0') 88 td.addClass('hidden'); 89 td.appendTo(tr); 90 }); 91 //table.find("tbody").append(tr); 92 table.append(tr); 93 94 tr.data("insert", true); 95 ipt.change(); 96 } 97 } 98 99 if (UpdateTotal > 0) {100 101 for (var i = 0; i < UpdateTotal; i++) {102 var row_data = myData["Update"][i];103 var trIID = row_data["trIID"];104 var trIndex;105 table.find("tr").each(function (idx, ele)106 {107 var iid = $(ele).find("td").eq(trIIDIndex).html();108 if (iid == trIID) {109 trIndex = idx;110 }111 });112 113 var cells = table.find("tr").eq(trIndex);114 table.find('colgroup col').each(function (idx, el)115 {116 var index = $(el).data('index');117 if (index)118 {119 var td = cells.find("td").eq(idx);120 var type = $(el).data('type');121 var test =new Object();122 123 var text = row_data[index];124 125 if (type == 'CheckBox')126 {127 128 var ck = td.find('input[type="checkbox"]');129 if (text == '1')130 ck.prop('checked', true);131 else132 ck.prop('checked', false);133 }134 else135 {136 td.text(text);137 }138 }139 });140 cells.data("update", true);141 ipt.change();142 143 }144 }145 146 if (DelTotal > 0) {147 for (var i = 0; i < DelTotal; i++) {148 var row_data = myData["Del"][i];149 var trIID = row_data["trIID"];150 table.find("tr").each(function (idx,ele) {151 var iid = $(ele).find("td").eq(trIIDIndex).html();152 if ( iid== trIID)153 {154 $(this).css("display", "none");155 $(this).data("delete", true);156 ipt.change();157 }158 });159 160 }161 }162 163 164 }165 });166 }167 }168 169 170 171 //绑定change事件172 allControl.each(function (i, el) {173 var name = $(el).attr('name');174 if (name) {175 $(el).on('change', function () {176 onchange(this);177 });178 }179 });180 181 //保存修改的数据182 function onchange(el) {183 var storage = localStorage.getItem(id);184 if (storage == null) {185 formDataDb = new Object();186 var key = $(el).attr("name");187 var value = $(el).val();188 formDataDb[key] = value;189 localStorage.setItem(id, JSON.stringify(formDataDb));190 } else {191 var myData = JSON.parse(storage);192 var key = $(el).attr("name");193 var value = $(el).val();194 myData[key] = value;195 localStorage.setItem(id, JSON.stringify(myData));196 }197 }198 };199 200 //删除localStorage中的数据201 function onsave(form) {202 var fh = form_handler;203 var p = fh.getParams(form);204 var id = 'FORM_' + DCI.LoginUser.UserId + '_' + p.bimId + '_' + p.formId + '_' + p.iid;205 localStorage.removeItem(id);206 207 208 var allGrid = $(form).find(".form-table");209 var formId = $(form).data("formid");210 allGrid.each(function (index,element) {211 var formName = $(element).find("input:hidden[data-formid]").attr("name");212 var storageKey = "FORM_" + formId + "_" + formName;213 localStorage.removeItem(storageKey);214 });215 216 localStorage.setItem("FORM_" + formId + "_isGridData", null);217 }218 219 function ongridadd(form, table, data, tr) {220 var inputflag = table.closest("div .form-table").find("input:hidden[data-formid]")221 var storageKey;222 var formId = $(form).data("formid");;223 localStorage.setItem("FORM_" + formId + "_isGridData", "1");224 var RowNumber = table.find(".active").children().eq(1).html();225 var trIIDIndex;226 var trIID;227 table.find("col").each(function (idx, ele) {228 if ($(ele).data("index") == "IID") {229 trIID = table.find(".active").children().eq(idx).html();230 trIIDIndex = idx;231 }232 });233 var InsertObj = { trIID: trIID, RowNumber: RowNumber };234 235 var columnArr = table.children().find("[data-index]");236 if (columnArr) {237 columnArr.each(function (index, element) {238 var flag = $(element).data("index");239 InsertObj[flag] = data[flag];240 }); 241 }242 243 if (inputflag && trIID)244 {245 storageKey = "FORM_" + formId + "_" + inputflag.attr("name");246 //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'}]}";247 248 var getLocalStorage = localStorage.getItem(storageKey);249 if (getLocalStorage) {250 251 var dataObj = JSON.parse(getLocalStorage);252 var InsertTotal = dataObj["Total"]["InsertTotal"];253 254 dataObj["Insert"][InsertTotal] = InsertObj;255 dataObj["Total"]["InsertTotal"] = InsertTotal + 1;256 localStorage.setItem(storageKey, JSON.stringify(dataObj));257 258 } else259 {260 var mydata = { Total: { InsertTotal: 1, UpdateTotal: 0, DelTotal: 0 }, Insert: [InsertObj], Update: [], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };261 localStorage.setItem(storageKey, JSON.stringify(mydata));262 }263 }264 265 }266 267 function ongridedit(form, table, data, tr) {268 269 var inputflag = table.closest("div .form-table").find("input:hidden[data-formid]")270 var formId = $(form).data("formid");271 var storageKey = "FORM_" + formId + "_" + inputflag.attr("name");272 localStorage.setItem("FORM_" + formId + "_isGridData", "1");273 var mySourceData = {};274 var trIIDIndex;275 table.find("col").each(function (idx, ele)276 {277 var index = $(ele).data("index");278 var type = $(ele).data("type");279 if (index)280 {281 if (type == "CheckBox")282 {283 var val = table.find(".active").children().eq(idx).html();284 var value =$(val).val();285 mySourceData[index] = value;286 }287 else288 {289 if (index == "IID")290 {291 trIIDIndex = idx;292 }293 mySourceData[index] = table.find(".active").children().eq(idx).html();294 }295 }296 });297 298 var trIID = mySourceData["IID"];299 var UpdateObj = { trIID: trIID };300 $.extend(UpdateObj, mySourceData);301 302 var getLocalStorage = localStorage.getItem(storageKey);303 if (getLocalStorage)304 {305 var dataObj = JSON.parse(getLocalStorage);306 var InsertTotal = dataObj["Total"]["InsertTotal"];307 var UpdateTotal = dataObj["Total"]["UpdateTotal"];308 309 310 311 if (InsertTotal > 0)//新增后在编辑312 {313 for (var i = 0; i < InsertTotal; i++) {314 var row_data = dataObj["Insert"][i];315 if (row_data["trIID"] == trIID) {316 $.extend(dataObj["Insert"][i], UpdateObj);317 }318 }319 }320 321 if (UpdateTotal > 0)//编辑之后在编辑322 {323 for (var i = 0; i < UpdateTotal; i++) {324 var row_data = dataObj["Update"][i];325 if (row_data["trIID"] == trIID) {326 $.extend(dataObj["Update"][i], UpdateObj);327 }328 }329 }330 331 var UpdateTotal = dataObj["Total"]["UpdateTotal"];332 dataObj["Update"][UpdateTotal] = UpdateObj;333 dataObj["Total"]["UpdateTotal"] = UpdateTotal + 1;334 335 336 localStorage.setItem(storageKey, JSON.stringify(dataObj));337 }338 else339 {340 341 var mydata = { Total: { InsertTotal: 0, UpdateTotal: 1, DelTotal: 0 }, Insert: [], Update: [UpdateObj], Del: [], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };342 localStorage.setItem(storageKey, JSON.stringify(mydata));343 }344 345 346 var testdata = localStorage.getItem(storageKey);347 var myData = JSON.parse(testdata);348 if (testdata != null) {349 alert(testdata);350 //alert(mydata);351 //alert(myData["Total"]["InsertTotal"]);352 //alert(myData["Insert"][0]["ID"]);353 }354 }355 356 function ongriddel(form, table, tr) {357 var inputflag = table.closest("div .form-table").find("input:hidden[data-formid]")358 var formId = $(form).data("formid");359 var storageKey = "FORM_" + formId + "_" + inputflag.attr("name");;360 localStorage.setItem("FORM_" + formId + "_isGridData", "1");361 var trIIDIndex;362 var trIID;363 table.find("col").each(function (idx, ele) {364 if ($(ele).data("index") == "IID")365 {366 trIIDIndex = idx;367 trIID = tr.find("td").eq(idx).html();368 }369 });370 371 var DelObj = { trIID: trIID };372 373 var getLocalStorage = localStorage.getItem(storageKey);374 if (getLocalStorage) {375 376 var dataObj = JSON.parse(getLocalStorage);377 var isInsertData = false;378 var isUpdateDel = false;379 var InsertTotal = dataObj["Total"]["InsertTotal"];380 var DelTotal = dataObj["Total"]["DelTotal"];381 var UpdateTotal = dataObj["Total"]["UpdateTotal"];382 383 384 if (InsertTotal > 0) {385 386 for (var i = 0; i < InsertTotal; i++) {387 var row_data = dataObj["Insert"][i];388 if (row_data["trIID"] == trIID) {389 isInsertData = true;390 dataObj["Insert"][i] = null;391 }392 }393 }394 395 if (UpdateTotal>0)396 {397 for (var i = 0; i < UpdateTotal; i++) {398 var row_data = dataObj["Update"][i];399 if (row_data["trIID"] == trIID) {400 isUpdateDel = true;401 dataObj["Update"][i] = null;402 }403 }404 }405 406 407 if (isInsertData)408 {409 var tempArr = [];410 for (var i = 0; i < InsertTotal; i++) {411 if (dataObj["Insert"][i] != null) {412 tempArr[i]=dataObj["Insert"][i];413 }414 }415 416 dataObj["Insert"] = tempArr;417 dataObj["Total"]["InsertTotal"] = InsertTotal - 1;418 }419 else420 {421 422 if (isUpdateDel)423 {424 var tempArr = [];425 for (var i = 0; i < InsertTotal; i++) {426 if (dataObj["Update"][i] != null) {427 tempArr[i] = dataObj["Update"][i];428 }429 }430 431 dataObj["Update"] = tempArr;432 dataObj["Total"]["UpdateTotal"] = UpdateTotal - 1;433 434 } 435 436 dataObj["Del"][DelTotal] = DelObj;437 dataObj["Total"]["DelTotal"] = DelTotal + 1;438 439 }440 441 localStorage.setItem(storageKey, JSON.stringify(dataObj));442 if (dataObj["Total"]["InsertTotal"] == 0 && dataObj["Total"]["UpdateTotal"] == 0 && dataObj["Total"]["DelTotal"] == 0)443 {444 localStorage.setItem("FORM_" + formId + "_isGridData", null);445 }446 447 448 } else449 {450 var mydata = { Total: { InsertTotal: 0, UpdateTotal: 0, DelTotal: 1 }, Insert: [], Update: [], Del: [DelObj], Notes: { storageKey: storageKey }, trIIDIndex: { IID: trIIDIndex } };451 localStorage.setItem(storageKey, JSON.stringify(mydata));452 }453 454 }455 456 return {457 onload: onload,458 onsave: onsave,459 ongridadd: ongridadd,460 ongridedit: ongridedit,461 ongriddel: ongriddel462 }463 });
希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
