一 代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 客户端留言板 </title> <style type="text/css"> table { border-collapse: collapse; } td , th{ border: 1px solid #888; padding: 4px; } </style> </head> <body> <h2>客户端留言板</h2> <textarea id="msg" name="msg" cols="50" rows="8"></textarea><br/> <input type="button" value="添加留言" onclick="addMsg();"/> <input type="button" value="清除留言" onclick="clearMsg();"/> <hr/> <table style="width:550px"> <tr> <th>留言内容</th> <th>留言时间</th> </tr> <tbody id="show"></tbody> </table> <script type="text/javascript"> // 加载留言信息 var loadMsg = function() { var tb = document.getElementById("show"); // 清空原来显示的内容。 tb.innerHTML = ""; // 遍历所有留言信息 for(var i = 0 ; i < localStorage.length ; i++) { var key = localStorage.key(i); var date = new Date(); date.setTime(key); // 获取留言时间 var datestr = date.toLocaleDateString() + " " + date.toLocaleTimeString(); // 获取留言内容 var value = localStorage.getItem(key); var row = tb.insertRow(i); // 添加第一个单元格,并显示留言内容 row.insertCell(0).innerHTML = value; // 添加第二个单元格,并显示留言内容。 row.insertCell(1).innerHTML = datestr; } } var addMsg = function() { var msgElement = document.getElementById("msg"); var time = new Date().getTime(); // 以当前时间为key来保存留言信息 localStorage.setItem(time , msgElement.value); msgElement.value = ""; alert("数据已保存。"); loadMsg(); } function clearMsg() { // 清空Local Storage里保存的数据。 localStorage.clear(); alert("全部留言信息已被清除。"); loadMsg(); } window.onload = loadMsg(); </script> </body> </html>
二 运行效果
相关推荐
NULL 博文链接:https://yuruei2000.iteye.com/blog/1489088
软件名称:华硕网络存储:WebStorage APK名称:com.ecareme.asuswebstorage 最新版本:2.1.28.8207 支持ROM:2.2及更高版本 界面语言:简体中文 软件大小:10.23 M 软件简介: 全球超过三千万个注册用户;Google ...
react-webstorage 直接使用 W3C WebStorage API 的任何实现作为 React/Flux 风格的存储。 var WebStorage = require ( 'react-webstorage' ) , dispatcher = require ( './path/to/app-dispatcher' ) ; var web...
html web storage 别人写的,共享下
Web Storage.rar
贡多里Ondotori Web Storage API客户端(T&D WebStorage Service API客户端)安装go get -u github.com/k28/go-ondotori例子获取当前读数package mainimport ("context""fmt""github.com/k28/go-ondotori")func ...
var webstorage = require ( 'webstorage' ) ; var storage = webstorage ( ) ; storage . setItem ( 'foo' , 'bar' ) ; storage . getItem ( 'foo' ) // => 'bar' 如果你想在本地持久化数据,你可以使用插件。 ...
还在烦恼JS前端,或者移动端缓存使用什么来储存吗。可以使用web-storage-cache.js,进行数据缓存。
网络存储本地 一个持久性插件为本地文件存储。... var webstorage = require ( 'webstorage' ) ; var local = require ( 'webstorage-local' ) ; webstorage ( local ( '/tmp' ) ) ; 执照 麻省理工学院
cloudstorage_web_参考
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此...
华为FusionStorage软件安装指南.pdf
ngx-webstorage 本地和会话存储-Angular服务 该库提供了易于使用的服务,可通过Angular应用程序管理Web存储(本地和会话)。 它还提供了两个装饰器来同步组件属性和Web存储。 指数: : : 从v2.x迁移到v3 将您的...
h5webstorage 适用于Angular2HTML5 WebStorage API (服务) (服务) (装饰器) (功能) 用 下载库: npm install h5webstorage --save 2.将模块和提供程序导入顶级模块: import { WebStorageModule } ...
安装Storage_Manager管理软件客户端并调
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB,感兴趣的朋友可以了解下
jquery-webstorage 这个插件的目标是简化 webstorage 的使用(也称为 sessionStorage 和 localStorage): 您可以存储任何类型的数据类型并且不关心转换 你可以使用命名空间 您可以跨不同的选项卡/窗口使用存储...
StorageFoundation方案模板.doc
主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料,Web Storage如何用JSON存储多个数据,感兴趣的小伙伴们可以参考一下
角度网络存储 这个模块注定要与一起使用。 它允许您将数据在浏览器的... 下载存储库并从 dist 存储库中获取 angular-webstorage.js 文件。 将该模块包含在您的 Angular 应用程序中。 在 Angular 导入之后,在index.htm