HTML5 用localStorage写的留言本

最新推荐文章于 2022-03-31 12:53:46 发布
最新推荐文章于 2022-03-31 12:53:46 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 前端开发 HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ios0213/article/details/51366687
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的web留言本工具</title>
<style type="text/css">
body{
text-align:center;
}
</style>
</head>


<body>
<h1>简单的web留言本</h1>
<textarea id="demo" cols="50" rows="15"></textarea><br />
<input type="button" value="追加" onClick="savestorage()" />
<input type="button" value="初始化" onClick="clearstorage()" />
<p id="img"></p>
<script>
function savestorage()
{
var txt_message=document.getElementById("demo").value;
var time=new Date().getTime();   /*获取时间*/
localStorage.setItem(time,txt_message);   /*把时间作为键名*/
alert("数据已经成功保存!");
loadstorage("img");
}
function loadstorage(id)
{
var result="<table border='1'>";
for(var i=0;i<localStorage.length;i++)
{
var key=localStorage.key(i);    /*得到数据的索引号*/
var value=localStorage.getItem(key);  /*获取数据*/
var date=new Date();
date.setTime(key);  /*将之前获取的时间 以毫秒设置，在1970/1/1基础上添加毫秒*/
var datestr=date.toGMTString();   /*将时间 对象转换为字符串*/
result+="<tr><td>"+value+"</td><td>"+datestr+"</td></tr>";
}
result+="</table>";
var target=document.getElementById(id);
target.innerHTML=result;
}


function clearstorage()
{
localStorage.clear();
alert("全部数据被清除!");
loadstorage("img");
}
</script>
</body>
</html>
ios0213
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LocalStorage实现留言板功能
06-18
通过localStorage实现留言板的功能，点击添加即可新增留言，可对留言进行修改及删除功能。
HTML5中Localstorage的使用教程
09-28
主要介绍了HTML5中Localstorage的使用教程,Localstorage被用于浏览器和系统交互的本地传出,需要的朋友可以参考下
local存储做用户信息卡
qq_50951790的博客
03-31 335
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
HTML5学习05-Web Storage存储
bobo89455100的博客
07-05 712
认识Web Storage一、什么是Web Storage一、Web Storage和Cookies的区别 我们之前开发一般都是使用Cookies在客户端保存诸如用户名等简单用户信息，但通过长期的使用，人们发现还用Cookies存储永久数据存在几个问题。 大小：Cookies的大小被限制在4KB 宽带：Cookies是随HTTP事务一起被发送的，因此浪费一部分发送Cookies时使用的宽
利用H5本地存储localStorage、sessionStorage
Purpletaro的专栏
04-06 603
　　现代浏览器普遍开始支持H5本地存储，localStorage、sessionStorage。可以用来代替cookie的一部分存储功能，他比cookie存储量更大。比较实用。 　　两者用法类似。localStorage存储，如果不清除那么一直存在；sessionStorage是在一个会话级别上存在，如果会话关闭，那么就没了。顾名思义吧。 　　他们存值都是以键值对形式存在，值也是存入字符串类型...
localStorage demo:留言板
yz764127031的博客
03-17 1432
截图 功能描述： 1.定时两秒自动保存留言板内容，关闭浏览器重新打开后，留言板内容依然存在 2.点击clear，清除留言板内容 3.点击sumbit，在下方打印留言板内容，点击删除可以删除该条留言代码<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>留言板</title> <
通过localStorage 来实现留言板
weixin_34245749的博客
03-20 422
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>小小留言板</title> </head> <body> <div> <textareaid="trCon"cols="...
js+css+html制作简易留言板
热门推荐
橘猫吃不胖的博客
11-29 5万+
js+css+html制作简易留言板1 案例说明2 编写HTML代码3 编写css代码4 编写JavaScript代码5 全部代码 1 案例说明 利用JavaScript、css以及html制作简易留言板，也可以看作是简易评论区。 要求在页面文本框中输入一些文字之后，点击“发布”按钮，就可以让输入的文字显示在下面，重新输入一些文字，再点击发布，就可以让新发布的内容显示在最上面。点击后面的删除，就可以删除已经发布的文字。 【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击
localStorage实现简单web 留言本
qq_36354609的博客
08-29 769
DOCTYPE html> html lang="en"> head> title>web 留言本title> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1"> head> body> p>简单web 留言本p> textarea i
Web Storage实现简单的留言本
天马行空的专栏
08-17 1615
Web Storage可以保存数据在客户端本地，以key-value的形式存储，长久存储数据需要用到localStorage,短期保存可以使用sessionStorage. 代码截图： 源代码： index.html                         app.js function saveDa
html5简易Web留言本
04-07
利用web Storage实现大数据的在线存储
简易留言板HTML
04-03
这是一套简易的前后台全套的留言模板html代码与css样式。可供新手学习和借鉴
HTML5 localStorage使用总结
09-27
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的...
使用jquery读取html5 localstorage的值的方法
10-27
在HTML 5中，localstorage是个不错的东西，在支持localstorage的浏览器中， 能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值,很不错的一个东西，接下来实例介绍，需要的朋友可以参考...
HTML5 本地存储 LocalStorage详解
09-28
下面小编就为大家带来一篇HTML5 本地存储 LocalStorage详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5中localStorage本地存储的简单使用
01-19
我们在做页面时会用到本地存储的时候，今天说说localStorage本地存储。 1、localStorage.name=老王; //第一种设置存储本地数据的方法localStorage 2、localStorage.setItem(color,red); //第二种设置存储本地数据...
HTML5 播放视频代码
ios0213的专栏
05-10 5301
无标题文档 ni de liulanqi bu zhichi shipin 播放或暂停 大 中 小 var myvideo=document.getElementById("demo"); function clic_play_pause() { if(myvideo.paused)   /*paused检测视频播放是否暂停*/   myvideo.pl
HTML5事件监听
ios0213的专栏
05-10 2250
无标题文档 function playorpausevideo() { var videourl=document.getElementById("videourl").value; var video=document.getElementById("video"); video.addEventListener("timeupdate",function() { var ti
html5 保存数据到LocalStorage
最新发布
03-29
LocalStorage是HTML5中的一个新特性，它提供了一种在浏览器中存储数据的方法，数据存储在用户的本地计算机上，即使关闭浏览器，数据也不会丢失。在HTML5中，可以使用localStorage对象来访问和操作LocalStorage。 下面是保存数据到LocalStorage的步骤： 1.创建一个localStorage对象： ```javascript var storage = window.localStorage; ``` 2.使用setItem方法将数据保存到LocalStorage中： ```javascript storage.setItem("key", "value"); ``` 其中，key是要保存的数据的键，value是要保存的数据的值。 3.使用getItem方法从LocalStorage中获取保存的数据： ```javascript var value = storage.getItem("key"); ``` 其中，key是要获取的数据的键。 4.使用removeItem方法从LocalStorage中删除保存的数据： ```javascript storage.removeItem("key"); ``` 其中，key是要删除的数据的键。 完整的代码示例： ```javascript // 创建一个localStorage对象 var storage = window.localStorage; // 保存数据到LocalStorage中 storage.setItem("username", "Tom"); // 从LocalStorage中获取保存的数据 var username = storage.getItem("username"); console.log(username); // 输出：Tom // 从LocalStorage中删除保存的数据 storage.removeItem("username"); ``` 注意事项： 1. localStorage只能存储字符串类型的数据，如果要存储其他类型的数据，需要先将其转换为字符串类型。 2. localStorage的存储容量有限，不同浏览器的容量也不同，一般为5-10MB左右。如果数据量较大，建议使用其他存储方式，如IndexedDB或Web SQL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值