Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

localStorage应用(写的时间缓存在本地浏览器)

易函123 2019-02-16 15:59:00 阅读数:162 评论数:0 点赞数:0 收藏数:0

最近用了下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

今日未领短信,请立即签到!

签到规则

每签到获得10条短信的赠送。

连续签到敬请期待。。。。

连续签到16天及以上敬请期待。。。。

其他说明

每签到获得10条短信的赠送,一天只能领取一次

其他活动敬请期待。。。。


10

您领取了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

//点击后效果 functiondianJi(){ localStorage.dateMsg=dateMsg; qianDao.classList.add("active"); pHtml.innerHTML= "今日已领10条短信,请明日继续签到!"; suQian.style.display= "block"; }//关闭窗口 functioncloseCk() { suQian.style.display= "none"; }var qianDao = document.getElementById("js-just-qiandao"), pHtml= document.getElementById("pHtml"), close= document.getElementById("close"), suQian= document.getElementById("suQian"), dateMsg= newArray; date= newDate(), dateYear=date.getFullYear(), dateMonth=date.getMonth(), dateDate=date.getDate(); dateMsg=[dateYear, dateMonth, dateDate]; qianDao.addEventListener("click", dianJi); close.addEventListener("click", closeCk); (function() {var date = newDate(), old= newArray, dateY=date.getFullYear(), dateM=date.getMonth(), dateD=date.getDate(), newMsg= newArray, 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)

当然只是简单的应用,代码还没怎么整理,有不足之处,望指出。

版权声明
本文为[易函123]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/yihan123/p/10388049.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领