共计 5951 个字符，预计需要花费 15 分钟才能阅读完成。
最近用了下 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
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”>
<meta http-equiv=’x-ua-compatible’ content=’IE=Edge,chrome=1″‘ />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-touch-fullscreen” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<script type=”text/javascript” charset=”utf-8″ src=”js/jquery/jquery-1.11.2.min.js”></script>
<meta charset=”utf-8″ />
</head>
<body>
<div class=”qiandao-right”>
<div class=”qiandao-top”>
<div class=”just-qiandao qiandao-sprits” id=”js-just-qiandao”>
</div>
<p class=”qiandao-notic” id=”pHtml”> 今日未领短信，请立即签到！</p>
</div>
<div class=”qiandao-bottom”>
<div class=”qiandao-rule-list”>
<h4> 签到规则 </h4>
<p> 每签到获得 10 条短信的赠送。</p>
<p> 连续签到敬请期待。。。。</p>
<p> 连续签到 16 天及以上敬请期待。。。。</p>
</div>
<div class=”qiandao-rule-list”>
<h4> 其他说明 </h4>
<p> 每签到获得 10 条短信的赠送，一天只能领取一次 </p>
<p> 其他活动敬请期待。。。。</p>
</div>
</div>
</div>
<div class=”qiandao-layer qiandao-active” id=”suQian”>
<div class=”qiandao-layer-con qiandao-radius”>
<a href=”javascript:;” class=”close-qiandao-layer qiandao-sprits” id=”close”></a>
<div class=”yiqiandao clear”>
<div class=”yiqiandao-icon qiandao-sprits”></div><br>
</div>
<div class=”qiandao-jiangli qiandao-sprits”>
<span class=”qiandao-jiangli-num”>10<em> 条 </em></span>
</div>
<p> 您领取了 10 条短信 <br> 已经充入您的短信余额！</p>
</div>
<div class=”qiandao-layer-bg”></div>
</div>
<script src=”js/qianDao.js”></script>
</body>
</html>
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)
`
当然只是简单的应用，代码还没怎么整理，有不足之处，望指出。
