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 简单的网页留言版的更多相关文章

  1. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 前端用Webpact打包React后端Node+Express实现简单留言版

    前言 React官方推荐用Browserify或者Webpack 来开发React组件. Webpack 是什么?是德国开发者 Tobias Koppers 开发的模块加载器.Instagram 工程 ...

  4. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  5. 通过flask实现web页面简单的增删改查bootstrap美化版

    通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...

  6. HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

    Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...

  7. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  8. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  9. Web Storage API ： LocalStroage

    这是一篇详细介绍详细介绍详细介绍_(:з」∠)_ 背景: 当你访问一个页面,并不是丢到服务器,等待用户访问就可以了的.从输入网址到显示网页的全过程,可以参考这里 简单来说,在输入url按下回车键后,首 ...

随机推荐

  1. Tab选项卡 延迟切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 7天玩转 ASP.NET MVC

    在开始时请先设置firefox中about:config中browser.cache.check_doc_frequecy设置为1,这样才能在关闭浏览器时及时更新JS 第一.二天的内容与之前的重复,这 ...

  3. Spring Security 安全认证

    Spring Boot 使用 Mybatis 依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> ...

  4. 浅析弹性公网IP付费模式和短时升配功能介绍

    ​ 弹性公网IP付费模式对比 弹性公网IP(EIP),有两种付费方式.一种是预付费,一种是后付费.对于预付费弹性公网IP而言,最大的优点就是带宽费用便宜,相对于后付费有比较大的优惠. 例如,杭州地域6 ...

  5. LUOGU P3380 【模板】二逼平衡树（树套树）

    传送门 解题思路 这里写的是常数巨大的线段树套\(splay\),卡了半天常才过.首先线段树每个节点挂一个\(splay\),\(splay\)中的元素即为线段树管辖的区间中的数.对于操作\(1\), ...

  6. 51nod 1486 大大走格子(容斥+dp+组合数)

    传送门 解题思路 暴力容斥复杂度太高,无法接受,考虑用\(dp\).设\(f(i)\)表示从左上角开始不经过前面的阻断点,只经过\(i\)的阻断点.那么可以考虑容斥,用经过\(i\)的总方案数减去前面 ...

  7. Codeforces Round #578 (Div. 2) E. Compress Words (双哈希)

    题目:https://codeforc.es/contest/1200/problem/E 题意:给你n个单词,你需要把他合成成一个句子,相邻的两个单词,相邻部分相同的话可以把其中一个的删掉 思路:因 ...

  8. The shortest problem（hdu，多校

    The shortest problem Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  9. Harbor安装(docker-compose) -- 企业级Registry仓库

    根据Harbor官方描述: Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docker Distri ...

  10. [CSP-S模拟测试]:God Knows（线段树维护单调栈）

    题目描述 小$w$来到天堂的门口,对着天堂的大门发呆.大门上有一个二分图,左边第$i$个点连到右边第$p_i$个点.(保证$p_i$是一个排列).小$w$每次可以找左边某个对应连线尚未被移除的点$i$ ...