离线存储及实例留言板

离线存储分为两种：1.客户端储存也称为浏览器存储 (sessionStorage) 2. 硬盘存储(localStorage)且两者用法一致
客户端存储缺点:为当用户关闭浏览器保存数据则消失硬盘存储则一直存在

sessionStorage.setItem();    //steItem() 进行存储 两个参数 1.键值key 2.数据
sessionStorage.getItem();    //getItem() 读取数据  一个参数(key)

留言板


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>//设置留言板样式<style>#block{width: 600px;height: auto;border: 1px solid black;margin: 0 auto;}textarea{width: 500px;height: 150px;resize: none;}#block li{margin: 10px;}#ctn{margin:20px 50px;font-size: 14px;}.txt1{width: 500px;height: auto;border-bottom: 1px dashed black;color: red;padding: 10px 0;}.liuyan span{color: red;}.liuyan img{width: 40px;height:40px;}</style>//js代码段<script>window.onload= function (){//获取DOM元素var btn=document.getElementById("btn");var txt=document.getElementById("title");var content=document.getElementById("txt");var ctn=document.getElementById("ctn");var clear=document.getElementById("clear");//添加清除按钮的点击事件clear.onclick= function (){sessionStorage.clear();//清除硬盘存储事件showmessage();};//添加发表按钮的点击事件btn.onclick= function (){//如果主题和文本内容为空时则不能发表if(txt.value!=""&&content.value!=""){var time=new Date(); //实例化一个时间对象 获取当前时间//枚举对象var data={"face":"./logo/logo.png","nickname":"西开","title":txt.value,"text":content.value,"times":time.toLocaleString() //转化时间显示格式};/*离线存储时因为每一个留言的时间不同 所以进行存储时第一个参数为时间   JSON.stringify(data)是将data转化为字符串类型*/     sessionStorage.setItem(time.getTime(),JSON.stringify(data));alert("发表成功!");showmessage();}};showmessage();function showmessage(){ctn.innerHTML="";//清空var length=sessionStorage.length;for(var i=sessionStorage.length-1;i>=0;i--){var key=sessionStorage.key(i);//每一个留言的时间var data=JSON.parse(sessionStorage.getItem(key));//根据时间来获取数据 JSON.parse()为将字符串转化为json对象var string="<div class='liuyan'>"+'<img src="./logo/logo.png" alt=""/>'+"昵称："+"<span>"+data.nickname+"</span>标题：<span>"+data.text+"</span> 时间：<span>"+data.times+"</span>"+"</div>"+"<div>"+"内容："+"<div class='txt1'>"+data.text+"</div>"+"</div>";ctn.innerHTML+=string;}}}</script>
</head>
<body>
<div id="block"><ul ><li > 标题：<input type="text" id="title"></li><li> 内容：<textarea id="txt"></textarea></li><li> <button id="btn">发表</button><button id="clear">清除所有</button></li></ul><div id="ctn"></div>
</div>
</body>
</html>

离线存储及实例留言板相关推荐

html中评论存储方法,html5基于数据存储的评论留言板demo
本篇结合存储保存数据简要介绍数据保存.读取.清除的一个小demo. 简单的留言板简单的评论/留言板 js: function saveStorage(id) { var data = documen ...
PHP实例——留言板
留言板功能介绍用户利用留言板可以发表自己的留言,管理员可以在后台对留言进行回复或删除管理. 前台: 从数据库中读出已有的留言信息,最新的留言显示在最前面. 当留言数较多时,需要分页显示. 留言表单留 ...
php实现文件留言,PHP文件操作及实例：留言板
一.文件操作函数 1.创建文件:touch('./xxx.php'); bool touch ( string $filename [, int $time = time() [, int $atim ...
html5储存类型,html5本地存储-留言板
HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)! var Storage = { saveData:function()//保存数 ...
php制作留言板的题_PHP实现留言板功能实例代码
本文实例为大家分享了php留言板的实现思路,供大家参考,具体内容如下: 1.创建一个存放留言信息的文件名 2.获取表单中的数据给一个变量 3.判断文件的时候存在 4.对文件执行写的操作,在这之前,注意 ...
Vue实例-本地留言板
好久没有写新的笔记了,今天回想了一下之前学习的Vue知识,现在复习一遍,写写学习事的实例并加以修改一下: 本地记事本: 本地简单的留言板功能,后期其实可以添加盖楼功能的,但是目前先不考虑,大家也可以自 ...
php实例之简单的留言板,PHP实例一之简单的留言板
注:参考兄弟连教学视频写的一个简单的留言板模块,获得更多内容请参考我的博文. 示例:文本式留言板需要的知识点: 1.文件操作: file_put_contents();文件的写入函数 file_ge ...
MVC框架简易留言板实例
MVC是一种软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller),即为MVC. 首先创建一个数据库 use master -- ...
java留言板_java实现留言板功能实例
Messages.html message board 留言板姓名: E-mail: 主题: 留言: 查看留言 ? MessageData.java package message; public ...

离线存储及实例留言板

留言板

离线存储及实例留言板相关推荐

最新文章

热门文章