localStorage應用（寫的時間快取在本地瀏覽器）
摘要：
最近用了下localStorage，於是想記錄加深下映象；
有關更詳細的介紹，可以去看https://www.cnblogs.com/st-leslie/p/5617130.html；
我這引用了這個部落格的優勢介紹：大家可以瞭解下
一、什麼是localStorage、ses...
最近用了下localStorage，於是想記錄加深下映象；
有關更詳細的介紹，可以去看https://www.cnblogs.com/st-leslie/p/5617130.html；
我這引用了這個部落格的優勢介紹：大家可以瞭解下
一、什麼是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)
當然只是簡單的應用，程式碼還沒怎麼整理，有不足之處，望指出。