0. 前言
Web应用的飞速发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。我在前面也有写到Cookie，最简单而且兼容性最佳的就是Cookie，但是Cookie也有它的缺点。假如我们只是存储一些简单的键值对，那么，我们就可以使用localStorage的方式进行存储，因为，localStorage只要是同源都能访问，那你会不会问什么是同源？同源就是同协议，同域名，同端口。好了，本文主要说的是实现localStorage的留言板功能。
timg.jpg
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>
静态页面.png
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;
}
留言.png
看图片，我们可以看出我们不仅在页面中存储了我的信息，而且在服务器上也存储上了这些信息。
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);
}
}
删除单个留言.gif
看图，我先添加一些信息，然后我在点击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 = "";
}
删除所有.gif
在我点击删除所有的时候，不管是在本地的还是在页面上的都被删除了。
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();
显示所有信息.png
这个功能我给你展示不了了，就是你存入几条信息，关闭浏览器，然后在打开，那些信息，还会有，当然，在本地里也会有，就证明了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. 后记
对于这些存储的了解，我可能理解的不是很好，如果你发现我哪里写错了，请你留言告诉我，最后，留下你的脚印，点个赞，分享一下！！！
