您现在的位置是：网站首页> 编程资料编程资料
详解HTML5 LocalStorage 本地存储 _html5_网页制作_
2023-11-11
194人已围观
简介 本篇文章主要介绍了HTML5 LocalStorage 本地存储 ，HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。有兴趣的可以了解一下。
1.前言
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"); } } 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控件的结构。
编辑序号是否上传申报材料内容备注
1 BM00001141 4643 11111 2222 2 BM00001141 4644 87789789789798789 333
下面是完成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.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 = $('
相关内容
- 如何开发一款堪比APP的微信小程序（腾讯内部团队分享）_html5_网页制作_
- 详解HTML5表单新增属性_html5_网页制作_
- 详解HTML5通讯录获取指定多个人的信息 _html5_网页制作_
- HTML5-WebSocket实现聊天室示例_html5_网页制作_
- 解决img标签上下出现间隙的方法_html5_网页制作_
- HTML5地理定位与第三方工具百度地图的应用_html5_网页制作_
- 全民英雄游戏小知识及技巧汇总_手机游戏_游戏攻略_
- 天天飞车凌云R车怎么样 R级凌云满级属性介绍说明_手机游戏_游戏攻略_
- 迷你西游尉迟恭属性技能缘搭配效果一览_手机游戏_游戏攻略_
- 迷你西游罗成属性技能缘搭配效果一览_手机游戏_游戏攻略_
点击排行
本栏推荐
