一、在客户端存储数据的两种方法:
1.localStorage:没有时间限制的数据存储;
sessionStorage:针对一个session的数据存储;
由cookie完成,但cookie不适合大量数据的存储,因为其由每个服务器的请求来传递,使得cookie速度很慢且效率不高
2.在h5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。H5使用JavaScript来存储和访问数据。
二、客户端存储数据区别:
1.localStorage方法:存储的数据没有时间限制,本地存储方式,数据一直会被保留;
2.sessionStorage方法:针对一个session进行数据存储,当用户关闭浏览器窗口后,数据会被删除。
3.存取值:两种存储数据存取值方法一致;
localStorage.setItem(key,值); //存值
localStorage.getItem(key); //取值
客户端存储数据在存取值时需要用到键值,键值一致时才可以读取数据;
三、web存储实例:简易留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 800px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
.up{
height: 300px;
border-bottom: 1px solid black;
position: relative;
}
.ulist{
position: absolute;
left: 40px;
top: 20px;
}
li{
list-style: none;
}
#txt{
width: 350px;
height: 180px;
resize: none;/*去除文本域的拉伸*/
}
</style>
</head>
<body>
<div class="block">
<div class="up">
<ul class="ulist">
<li>标题:<input id="title" type="text"/></li>
<li>内容:<br/><textarea name="" id="txt" cols="30" rows="10"></textarea></li>
<li><button id="sumbit">发表</button><button id="clear">清除</button></li>
</ul>
</div>
<div class="down">
</div>
</div>
<script>
var sumbit=document.getElementById("sumbit");
var down=document.getElementsByClassName("down")[0];
var clear=document.getElementById("clear");
//删除事件
clear.οnclick=function(){
localStorage.clear();
};
//发表按钮存值事件
sumbit.οnclick=function (){
var title=document.getElementById("title").value;
var txt=document.getElementById("txt").value;
//建立json数据
var data={"title":title,"txt":txt};
//获取时间
var time=new Date().getTime();
//离线存储数据
localStorage.setItem(time,JSON.stringify(data));
//JSON.stringify(data);将json对象转化为json类型的字符串数组
//调用显示函数
showData();
};
//showData();
function showData() {
down.innerHTML="";
for(var i=0;i<localStorage.length;i++){
//将索引值转化为key值
var key=localStorage.key(i);
var data=JSON.parse(localStorage.getItem(key));
//JSON.parse() 方法用于将一个 JSON 字符串转换为对象
//localStorage.getItem(key) 利用键值key读取存储值
var time=new Date(parseInt(key)).toLocaleTimeString();//key为字符串类型 需先转换为number类型
//动态创建dom元素绑定数据
var str=" <div> <div>标题:<span>"+data.title+
"</span> 时间:<span>"+time+"</span> </div> <div>" +
data.txt+" </div> </div>";
down.innerHTML+=str;
}
}
</script>
</body>
</html>