最近用了下localStorage，于是想记录加深下映象；
有关更详细的介绍，可以去看https://www.cnblogs.com/st-le...；
我这引用了这个博客的优势介绍：大家可以了解下
一、什么是localStorage、sessionStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
三：应用（自己项目的应用）
html
今日未领短信，请立即签到！
签到规则
每签到获得10条短信的赠送。
连续签到敬请期待。。。。
连续签到16天及以上敬请期待。。。。
其他说明
每签到获得10条短信的赠送，一天只能领取一次
其他活动敬请期待。。。。
css：
*{
margin:0;
padding:0;
}
body，html{
background: #4d56a3;
}
.head {
height: 56px;
background-color: #4d56a3;
line-height: 56px;
font-size: 18px;
color: #fff;
}
.qiandao-right{
width: 90%;
margin: 0 auto;
background: url(../img/qiandao_con.png) no-repeat;
background-size: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.qiandao-top {
padding-top: 70px;
height: 13pc;
}
.just-qiandao {
margin: 0 auto 20px;
width: 212px;
height: 67px;
cursor: pointer;
}
.qiandao-sprits {
background-image: url(../images/qiandao_sprits.png);
background-repeat: no-repeat;
}
.qiandao-notic {
color: #b25d06;
text-align: center;
font-size: 18px;
}
.qiandao-rule-list {
margin-bottom: 35px;
color: #8d8ebb;
font-size: 1pc;
line-height: 26px;
}
.qiandao-rule-list h4 {
font-weight: bolder;
font-size: 1pc;
}
.qiandao-rule-list h4,
.qiandao-rule-list p{
color: #8d8ebb;
}
.qiandao-notic {
color: #b25d06;
text-align: center;
font-size: 18px;
}
.qiandao-sprits.active{
background-position: 0 -68px;
pointer-events: none;
}
.qiandao-layer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 888;
display: none;
width: 100%;
}
.qiandao-active .qiandao-layer-con {
margin: -232px 0 0 -211px;
width: 422px;
height: 434px;
}
.close-qiandao-layer {
position: absolute;
top: 13px;
right: 13px;
width: 1pc;
height: 1pc;
background-position: -228px -51px;
}
.qiandao-sprits {
background-image: url(../images/qiandao_sprits.png);
background-repeat: no-repeat;
}
.yiqiandao {
margin: 36px 0 0 40px;
color: #666;
font-size: 14px;
line-height: 38px;
}
.clear {
clear: both;
}
.yiqiandao .yiqiandao-icon {
float: left;
margin: 0 25px;
width: 178px;
height: 38px;
background-position: -217px 0;
}
.qiandao-sprits {
background-image: url(../images/qiandao_sprits.png);
background-repeat: no-repeat;
}
.yiqiandao {
margin: 36px 0 0 40px;
color: #666;
font-size: 14px;
line-height: 38px;
}
.qiandao-jiangli {
position: relative;
margin: 45px auto;
width: 335px;
height: 170px;
background-position: 0 -146px;
}
.qiandao-sprits {
background-image: url(../images/qiandao_sprits.png);
background-repeat: no-repeat;
}
.qiandao-jiangli span {
position: absolute;
top: 58px;
left: 50px;
display: block;
width: 178px;
height: 106px;
color: #ff7300;
text-align: center;
font-weight: bolder;
font-size: 30px;
line-height: 106px;
}
.qiandao-jiangli span em {
padding-left: 5px;
font-style: normal;
font-size: 1pc;
}
.qiandao-layer-bg {
width: 100%;
height: 100%;
background-color: #000;
opacity: .55;
filter: alpha(opacity=55);
}
.qiandao-active .qiandao-layer-con {
margin: 100px auto;
width: 90%;
margin-left: 5%;
height: 440px;
z-index: 100;
position: absolute;
box-sizing: border-box;
}
.qiandao-layer-con {
z-index: 999;
padding-top: 30px;
border: 3px #33b23f solid;
border-radius: 5px;
background-color: #fff;
}
.qiandao-layer-con p{
text-align: center;
color: #8c8c8c;
}
.headLeft:active {
background-color: #363f8e;
}js
// 点击后效果
function dianJi(){
localStorage.dateMsg = dateMsg;
qianDao.classList.add("active");
pHtml.innerHTML = "今日已领10条短信，请明日继续签到!";
suQian.style.display = "block";
}
//关闭窗口
function closeCk() {
suQian.style.display = "none";
}
var qianDao = document.getElementById("js-just-qiandao"),
pHtml = document.getElementById("pHtml"),
close = document.getElementById("close"),
suQian = document.getElementById("suQian"),
dateMsg = new Array;
date = new Date(),
dateYear = date.getFullYear(),
dateMonth = date.getMonth(),
dateDate = date.getDate();
dateMsg = [dateYear, dateMonth, dateDate];
qianDao.addEventListener("click", dianJi);
close.addEventListener("click", closeCk);
(function() {
var date = new Date(),
old = new Array,
dateY = date.getFullYear(),
dateM = date.getMonth(),
dateD = date.getDate(),
newMsg = new Array,
newMsg = [dateY, dateM, dateD];
old = localStorage.dateMsg.split(',');
var oldY = old[0],
oldM = old[1],
oldD = old[2];
if(oldY == dateY && oldM == dateM && oldD == dateD){
qianDao.classList.add("active");
pHtml.innerHTML = "今日已领10条短信，请明日继续签到!";
}
else {
qianDao.classList.remove("active");
pHtml.innerHTML = "今日未领短信，请立即签到！";
localStorage.dateMsg = newMsg;
}
})(jQuery)当然只是简单的应用，代码还没怎么整理，有不足之处，望指出。