html5 --- 利用localStorage进行本地存储

首先做一个提交到本地存储的表单及一个用来显示本地localStorage信息的表格…代码如下:

<h2> 本地存储用 </h2>标题: <input id="title" name="title" type="text" size="60" style="margin-left:32px;margin-bottom:5px;"/> <br />事件信息: <textarea id="content" name="content" cols="50" rows="8"> </textarea> <br />添加人:<input id="user" name="user" type="text" style="margin-left:22px;margin-bottom:5px;"/> <br /><input type="button" value="添加事件" onclick="addMsg();" /><input type="button" value="清除事件" onclick="clearMsg();" /><hr /><table style="width: 800px;border:1px solid black;"><tr><th>标题</th><th>事件内容</th><th>添加人</th><th>添加事件</th></tr><tbody id="show" style="text-align:center;"></tbody></table>

效果如下:

检查一下浏览器的本地存储:(google (F12))

接下来添加功能
点击添加事件,会把信息传递到浏览器的localStorage中.
点击清除事件,会被本地的值都删除.
代码如下:

var loadMsg = function(){var tb = document.getElementById("show");tb.innerHTML = "";for(var i = 0, j = 0; i< localStorage.length; i++){var key = localStorage.key(i);if(key.indexOf('_fk') == 0){var date = new Date();date.setTime(key.substring(3));var datestr = date.toLocaleDateString()+ "&nbsp;" + date.toLocaleTimeString();var msgStr = localStorage[key];var msg = JSON.parse(msgStr);var row = tb.insertRow(j++);row.insertCell(0).innerHTML = msg.title;row.insertCell(1).innerHTML = msg.content;row.insertCell(2).innerHTML = msg.user;row.insertCell(3).innerHTML = datestr;}}}var addMsg = function(){var titleElement = document.getElementById("title");var contentElement = document.getElementById("content");var userElement = document.getElementById("user");var msg = {title: titleElement.value,content: contentElement.value,user: userElement.value}var time = new Date().getTime();localStorage['_fk' + time] =JSON.stringify(msg);titleElement.value = "";contentElement.value = "";userElement.value = "";alert("数据已保存.");loadMsg();}function clearMsg(){localStorage.clear();alert("全部事件信息已被清除");loadMsg();}window.onload = loadMsg();

点击添加试试:

可以看见,在alert框弹出之后添加的内容出现了。
在打开调试台看看.

可以看见本地存储中确实存在,
可以尝试关闭网页后再打开…

数据还是存在…

参考《疯狂H5+CSS3+JS讲义》(第2版) P541~P542

html5 --- 利用localStorage进行本地存储相关推荐

Html5移动开发之Localstorage（本地存储）
HTML5本地存储Localstorage 自从Html5中出现了本地存储的(LocalStorage)的概念后,很多人都会想这个东西和我们传统web开发中的Cookie有什么特别之处,当然笔者也是其 ...
你可能需要好好认识一下这个LocalStorage（本地存储）
我们在了解LocalStorage之前,不妨先了解一下Web的存储机制: Web Storage 最早是在Web超文本应用技术工作组(WHAT_WG)的Web应用1.0规范中描述的.这个规范最初的工作 ...
php 获取localstorage,浅谈localStorage的本地存储
我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王"; //第一种设置存储本地数据的方法localSto ...
HTML5 LocalStorage 本地存储，刷新值还在
这里是新手了解,生产用到的话,请移到具有兼容性好的 store.js H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStor ...
HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别
cookie 存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销:但如果这些数据是每个请求都需 ...
本地存储localStorage
我们可以通过全局属性localStorage访问本地存储功能,该属性返回一个Storage对象,Storage对象用来保存键/值形式的字符串对象 Storage对象有如下属性和方法: Storage对 ...
HTML5 API详解（18）:IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...

html5 --- 利用localStorage进行本地存储

html5 --- 利用localStorage进行本地存储相关推荐

最新文章

热门文章