web storage 简单的网页留言版
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的网页留言版</title>
<script type="text/javascript" src="js/test6.js" ></script>
</head>
<body>
<h1>简单的网页留言版</h1> <textarea id="demo" cols="60" rows="10"></textarea>
<br>
<input type="button" value="保存" onclick="saveStorage('demo');">
<input type="button" value="清除" onclick="clearStorage('msg');">
<input type="button" value="读取" onclick="loadStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>
js
function saveStorage(id) {
var data=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
alert("数据保存成功");
}
function loadStorage(id){
var result = '<table border="1">';
for(var i = 0;i < localStorage.length;i++){ //localStorage.length所有保存在localStorage中的数据条数
var key = localStorage.key(i); //得到localStorage中与相应索引号对应的数据
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
var datestr = date.toGMTString();
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
}
result += '</table>';
var target = document.getElementById(id);
target.innerHTML = result;
}
//将localStorage中保存的数据全部清除
function clearStorage(id){
localStorage.clear();
alert("全部数据被清除");
loadStorage('msg');
}
效果:
web storage 简单的网页留言版的更多相关文章
- HTML5 本地存储Web Storage简单了解
HTML5本地存储规范,定义了两个重要的API :Web Storage 和 本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 前端用Webpact打包React后端Node+Express实现简单留言版
前言 React官方推荐用Browserify或者Webpack 来开发React组件. Webpack 是什么?是德国开发者 Tobias Koppers 开发的模块加载器.Instagram 工程 ...
- html5本地存储web storage的简单使用
html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...
- 通过flask实现web页面简单的增删改查bootstrap美化版
通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
- Web Storage API : LocalStroage
这是一篇详细介绍详细介绍详细介绍_(:з」∠)_ 背景: 当你访问一个页面,并不是丢到服务器,等待用户访问就可以了的.从输入网址到显示网页的全过程,可以参考这里 简单来说,在输入url按下回车键后,首 ...
随机推荐
- [BZOJ1018][SHOI2008]堵塞的交通traffic 时间分治线段树
题面 介绍一种比较慢的但是好想的做法. 网上漫天的线段树维护联通性,然后想起来费很大周折也很麻烦.我的做法也是要用线段树的,不过用法完全不同. 这个东西叫做时间分治线段树. 首先我们建一个\(1..m ...
- python代码整体左移或右移
IDE 是 PyCharm 选中代码块: 1)右移:直接 Tab 2)左移:Shift + Tab
- Matlab中利用null函数解齐次线性方程组
摘自:http://blog.csdn.net/masibuaa/article/details/8119032 有齐次线性方程AX=0,且rank(A)=r<n时,该方程有无穷多个解, 可以用 ...
- NET Core+win10+Jenkins+Github持续集成
本篇和上一篇NET Core+win10+Jenkins+Gogs+open ssh持续集成没什么区别,只不过源码库换成github. 这里有两点不一样的是: 获取的代码的凭证不用用户名和密码用sec ...
- 【leetcode】1014. Capacity To Ship Packages Within D Days
题目如下: A conveyor belt has packages that must be shipped from one port to another within D days. The ...
- java通过url调用远程接口返回json数据
java通过url调用远程接口返回json数据,有用户名和密码验证, 转自 https://blog.csdn.net/wanglong1990421/article/details/78815856 ...
- ajax 封装(集中 认证、错误、请求loading处理)
一.为什么要对 ajax 进行封装: (在使用antd pro 开发项目时,里面默认是把请求进行了封装的,放在 utils/request.js 中.使用起来非常方便 https://pro ...
- ansible控制winserver笔记
原文地址: https://www.cnblogs.com/kingleft/p/6391652.html 环境描述: ansible控制远程windows .系统必须是sp1 .安装framewor ...
- 使用mysql应该注意的细节
一.表及字段的命名规范 1.可读性原则 使用大写和小写来格式化的库对象名字以获得良好的可读性. 例如:使用CustAdress而不是custaddress来提高可读性.(这里注意有些DBMS系统对表名 ...
- CPU C-States Power Saving Modes
http://www.hardwaresecrets.com/article/611 Everything You Need to Know About the CPU C-States Power ...