0. 前言
Web应用的飞速发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。我在前面也有写到Cookie,最简单而且兼容性最佳的就是Cookie,但是Cookie也有它的缺点。假如我们只是存储一些简单的键值对,那么,我们就可以使用localStorage的方式进行存储,因为,localStorage只要是同源都能访问,那你会不会问什么是同源?同源就是同协议,同域名,同端口。好了,本文主要说的是实现localStorage的留言板功能。
1. 简介
Web Storage实际上是由两部分组成:sessionStorage与localStorage。
sessionStorage 会话存储
通过window.sessionStorage获得,为每一个同源维持一个独立的存储区域,该存储区域在页面会话期间可用,(即只要浏览器处于打开状态,包括页面重新加载和恢复),只要当会话结束之后(即只要关闭浏览器),数据也就随之销毁了,所以sessionStorage不是一个持久型本地存储,只是一个会话存储。
localStorage 本地存储
通过window.localStorage获得,为每一个同源区维持一个独立的存储区域,但是在浏览器关闭之后,然后重新打开数据仍然存在,可以用于持久型的本地存储,除非你主动删除,否则数据永远不会过期。
与cookie的不同
Web Storage数据完全存储在客户端,不需要通过浏览器的请求将数据传送给服务器,大概在5M左右。
注意
Storage的存储的key和value都是字符串,就算存储对象到value中,默认也会给转换成字符串,该字符串是"[ object object]",如果非要想存储对象的话,而且保留其结构,过后我们获取后可以正常使用的话,我们可以对其存储之前转换成字符串(序列化操作),取出来后,我们再可以转换成对象(反序列化操作)。
2. 代码实现
2.1 留言板的静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 500px;
height: 500px;
margin: 100px auto;
border: 2px solid darkgreen;
}
#msg{
float: left;
}
#msg input:first-of-type{
width: 390px;
height: 50px;
border: 1px solid darkgreen;
font-size: 30px;
}
#msg input:last-of-type{
width: 100px;
height: 50px;
color: white;
background-color: darkgreen;
font-size: 30px;
}
#clear input{
width: 200px;
height: 50px;
color: white;
background-color: darkgreen;
font-size: 30px;
}
ul li{
list-style: none;
border: 1px solid darkgreen;
}
ul li span{
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
<div id="msg">
<input type="text" id="msgInput" placeholder="请输入留言" />
<input type="button" id="msgBtn" value="留言" />
</div>
<div id="content">
<ul></ul>
</div>
<div id="clear">
<input type="button" id="clearAllBtn" value="清空所有" />
</div>
</div>
</body>
</html>
2.2 留言按钮
var msgBtn = document.querySelector("#msgBtn");
var msgInput = document.querySelector("#msgInput");
var clearAllBtn = document.querySelector("#clearAllBtn");
var msgUl = document.querySelector("ul");
//留言按钮
msgBtn.onclick = function () {
//字符串trim方法,可以去掉字符串前后两端的空格
//注意:中间的空格不会去掉,这个方法一般用于输入框空格的判断
var str = msgInput.value.trim();
if ( str != "" && str != null) {
//留言信息对象
var msgObj = {
value : escape(str),
date : new Date().getTime()
}
//存储到本地localStorage中
window.localStorage.setItem("msg_" + msgObj.date,JSON.stringify(msgObj));
//UI
msgUl.appendChild(createLi(msgObj));
//每次留言过后,清空input
msgInput.value = "";
}
}
//创建Li
function createLi(msgObj) {
var msgLi = document.createElement("li");
//利用li的自定义属性存储这个li对应的数据(key)
msgLi.setAttribute("key","msg_" + msgObj.date);
var msgSpan = document.createElement("span");
msgSpan.innerHTML = unescape(msgObj.value);
var dateSpan = document.createElement("span");
//先把时间毫秒数转换成日期格式(date),然后转换成字符串
dateSpan.innerHTML = new Date(msgObj.date).toLocaleString();
msgLi.appendChild(msgSpan);
msgLi.appendChild(dateSpan);
return msgLi;
}
看图片,我们可以看出我们不仅在页面中存储了我的信息,而且在服务器上也存储上了这些信息。
2.3 单个删除留言
在上一个封装的函数中创建删除按钮,实现删除单个留言。
//创建Li
function createLi(msgObj) {
var msgLi = document.createElement("li");
//利用li的自定义属性存储这个li对应的数据(key)
msgLi.setAttribute("key","msg_" + msgObj.date);
var msgSpan = document.createElement("span");
msgSpan.innerHTML = unescape(msgObj.value);
var dateSpan = document.createElement("span");
//先把时间毫秒数转换成日期格式(date),然后转换成字符串
dateSpan.innerHTML = new Date(msgObj.date).toLocaleString();
//删除单个留言按钮
var delBtn = document.createElement("input");
delBtn.type = "button";
delBtn.value ="X";
msgLi.appendChild(msgSpan);
msgLi.appendChild(dateSpan);
msgLi.appendChild(delBtn);
return msgLi;
}
//利用事件委托给Ul添加点击事件 单个删除留言
msgUl.onclick = function (e) {
if (e.target.nodeName == "INPUT") {
//删除本地存储中的键值对
window.localStorage.removeItem(e.target.parentNode.getAttribute("key"));
//删除页面上li
this.removeChild(e.target.parentNode);
}
}
看图,我先添加一些信息,然后我在点击X号的时候,在本地存储的和页面上的都被删除了。
2.4 清空所有
//清空所有
clearAllBtn.onclick = function () {
//数据清空 本地留言相关 存储
var liArr = document.querySelectorAll("li");
for (var key in window.localStorage) {
for (var i = 0; i < liArr.length; i++) {
if (liArr[i].getAttribute("key") == key) {
window.localStorage.removeItem(key);
}
}
}
//页面清空
msgUl.innerHTML = "";
}
在我点击删除所有的时候,不管是在本地的还是在页面上的都被删除了。
2.5 显示所有信息
//显示所有留言信息的功能
function showMsgInfos() {
var keyRegExp = /^(msg_)/;
for (var key in window.localStorage) {
if (keyRegExp.test(key)) {
console.log(window.localStorage.getItem(key))
console.log(JSON.parse(window.localStorage.getItem(key)))
msgUl.appendChild(createLi(JSON.parse(window.localStorage.getItem(key))));
}
}
}
showMsgInfos();
这个功能我给你展示不了了,就是你存入几条信息,关闭浏览器,然后在打开,那些信息,还会有,当然,在本地里也会有,就证明了localStore的数据持久型的特点,除非你主动删除,否则永远不会过期。
3. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 500px;
height: 500px;
margin: 100px auto;
border: 2px solid darkgreen;
}
#msg{
float: left;
}
#msg input:first-of-type{
width: 390px;
height: 50px;
border: 1px solid darkgreen;
font-size: 30px;
}
#msg input:last-of-type{
width: 100px;
height: 50px;
color: white;
background-color: darkgreen;
font-size: 30px;
}
#clear input{
width: 200px;
height: 50px;
color: white;
background-color: darkgreen;
font-size: 30px;
}
ul li{
list-style: none;
border: 1px solid darkgreen;
}
ul li span{
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
<div id="msg">
<input type="text" id="msgInput" placeholder="请输入留言" />
<input type="button" id="msgBtn" value="留言" />
</div>
<div id="content">
<ul></ul>
</div>
<div id="clear">
<input type="button" id="clearAllBtn" value="清空所有" />
</div>
</div>
<script type="text/javascript">
var msgInput = document.querySelector("#msgInput");
var msgBtn = document.querySelector("#msgBtn");
var clearAllBtn = document.querySelector("#clearAllBtn");
var msgUl = document.querySelector("ul");
//留言按钮
msgBtn.onclick = function () {
//字符串trim方法,可以去掉字符串前后两端的空格
//注意:中间的空格不会去掉,这个方法一般用于输入框空格的判断
var str = msgInput.value.trim();
if ( str != "" && str != null) {
//留言信息对象
var msgObj = {
value : escape(str),
date : new Date().getTime()
}
console.log(msgObj);
console.log(JSON.stringify(msgObj));
//存储到本地localStorage中
window.localStorage.setItem("msg_" + msgObj.date,JSON.stringify(msgObj));
//UI
msgUl.appendChild(createLi(msgObj));
//每次留言过后,清空input
msgInput.value = "";
}
}
//创建Li
function createLi(msgObj) {
var msgLi = document.createElement("li");
//利用li的自定义属性存储这个li对应的数据(key)
msgLi.setAttribute("key","msg_" + msgObj.date);
var msgSpan = document.createElement("span");
msgSpan.innerHTML = unescape(msgObj.value);
var dateSpan = document.createElement("span");
//先把时间毫秒数转换成日期格式(date),然后转换成字符串
dateSpan.innerHTML = new Date(msgObj.date).toLocaleString();
//删除单个留言按钮
var delBtn = document.createElement("input");
delBtn.type = "button";
delBtn.value ="X";
msgLi.appendChild(msgSpan);
msgLi.appendChild(dateSpan);
msgLi.appendChild(delBtn);
return msgLi;
}
//单个删除留言
msgUl.onclick = function (e) {
if (e.target.nodeName == "INPUT") {
//删除本地存储中的键值对
window.localStorage.removeItem(e.target.parentNode.getAttribute("key"));
//删除页面上li
this.removeChild(e.target.parentNode);
}
}
//清空所有
clearAllBtn.onclick = function () {
//数据清空 本地留言相关 存储
var liArr = document.querySelectorAll("li");
for (var key in window.localStorage) {
for (var i = 0; i < liArr.length; i++) {
if (liArr[i].getAttribute("key") == key) {
window.localStorage.removeItem(key);
}
}
}
//页面清空
msgUl.innerHTML = "";
}
//显示所有留言信息的功能
function showMsgInfos() {
var keyRegExp = /^(msg_)/;
for (var key in window.localStorage) {
if (keyRegExp.test(key)) {
msgUl.appendChild(createLi(JSON.parse(window.localStorage.getItem(key))));
}
}
}
showMsgInfos();
</script>
</body>
</html>
4. 后记
对于这些存储的了解,我可能理解的不是很好,如果你发现我哪里写错了,请你留言告诉我,最后,留下你的脚印,点个赞,分享一下!!!