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

padding:;

}

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:;

    bottom:;

    left:;

    z-index:;

    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:;

    position: absolute;

    box-sizing: border-box;

}

.qiandao-layer-con {

    z-index:;

    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)

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

localStorage应用（写的时间缓存在本地浏览器）的更多相关文章

  1. localstorage实现带过期时间的缓存功能

    前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求. 1.cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效 ...

  2. 请求网络图片缓存到本地 ,还有一些现成的图片加载框架的使用 Ace网络篇(一)

    现在去买年货~~~~~~ 占坑, 现在来填坑 填完睡觉,感谢这俩月的把自己往死里逼得奋斗从JAVA什么都不懂到现在,做这些也是给在自学路上的新人(我也是菜鸟)一点点我力所能及的帮助,等我水平更高了还会 ...

  3. java 手写 jvm高性能缓存

    java 手写 jvm高性能缓存,键值对存储,队列存储,存储超时设置 缓存接口 package com.ws.commons.cache; import java.util.function.Func ...

  4. 亿级流量客户端缓存之Http缓存与本地缓存对比

    客户端缓存分为Http缓存和本地缓存,使用缓存好处很多,例如减少相同数据的重复传输,节省网络带宽资源缓解网络瓶颈,降低了对原始服务器的要求,避免出现过载,这样服务器可以更快响应其他的请求 Http缓存 ...

  5. Visual Studio 2010 SP1 在线安装后，找到缓存在本地的临时文件以便下次离线安装

    由于在下载Visual Studio 2010安装程序(大约3G左右)的时候速度飞快,大约几分钟下载完毕(多线程下载工具下载),所以笔者在继续安装Visual Studio 2010 SP1的时候也选 ...

  6. .Net Core 跨平台开发实战-服务器缓存：本地缓存、分布式缓存、自定义缓存

    .Net Core 跨平台开发实战-服务器缓存:本地缓存.分布式缓存.自定义缓存 1.概述 系统性能优化的第一步就是使用缓存!什么是缓存?缓存是一种效果,就是把数据结果存在某个介质中,下次直接重用.根 ...

  7. CentOS7利用yum缓存搭建本地源

    CentOS7利用yum缓存搭建本地源 环境说明 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 ( ...

  8. android异步加载图片并缓存到本地实现方法

    图片过多造成内存溢出,这个是最不容易解决的,要想一些好的缓存策略,比如大图片使用LRU缓存策略或懒加载缓存策略.今天首先介绍一下本地缓存图片     在android项目中访问网络图片是非常普遍性的事 ...

  9. IOS把图片缓存到本地的几种方法

    把图片缓存到本地,在很多场景都会用到,如果是只储存文字信息,那建一个plist文件,或者数据库就能很方便的解决问题,但是如果存图片到沙盒就没那么方便了.这里介绍两种保存图片到沙盒的方法. 一.把图片转 ...

随机推荐

  1. 机器学习实战：意大利Covid-19病毒感染数学模型及预测

    作者:Gianluca Malato deephub翻译组:刘欣然 当今世界正在与一个新的敌人作斗争,那就是Covid-19病毒. 该病毒自首次在中国出现以来,在世界范围内迅速传播.不幸的是,意大利的 ...

  2. 学妹问的Spring Bean常用配置，我用最通俗易懂的讲解让她学会了

    你好呀,我是沉默王二,一枚有趣的程序员,写的文章一直充满灵气,力求清新脱俗.昨天跑去王府井的小米店订购了一台小米 10,说是一周之内能到货,但我还是忍不住今天就想见到她.见我茶不思饭不想的,老婆就劝我 ...

  3. Hadoop集群搭建(四)~centos6.8关闭防火墙

    一.centos关闭防火墙 1,关闭防火墙.service iptables stop 2,关闭防火墙开机自启.chkconfig iptables off 3,查看防火墙状态.service ipt ...

  4. iconfont字体图标的使用方法（转）

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  5. Angular入门之环境搭建（VS code）(转载)

    安装Visual Studio Code VS code和我们常用的VS压根不是一回事,它只是一个开源的轻量级编辑器,而不是IDE,因为支持typescript语法,且插件功能丰富,所以选择 官网下载 ...

  6. Python基础篇(一)_基本语法元素

    Python基础篇——基本语法元素 缩进:体现强制可读性,一般缩进4个空格.一个或多个Tab 注释:单行注释----以 # 开头 多行注释----每行以 # 开头,以 # 结束 变量:无须提前声明.可 ...

  7. 记一次:Windows的Socket编程学习和分析过程

    Socket编程依赖于:WS2_32.dll --- 服务端 --- .导入我们需要的函数 #incldue <windows.h> //#include<WinSock2.h> ...

  8. 欲善事先利器-IEAD插件篇

    工欲善其事,必先利其器,好鞋踢好球是非常合乎逻辑的事情. --<长江七号> 同样的开场白,不一样的酒,不一样的故事. 上篇<欲善事先利器--系统篇>已经推荐了一些个人常用的效率 ...

  9. bash编程练习，带选项，添加或删除用户

    脚本练习题: 可以接受选项及参数,而后能获取每一个选项,及选项的参数,并能根据选项及参数做出特定的操作: 比如:adminusers.sh -a|--add user .. -d|--del user ...

  10. Journal of Proteome Research | Prediction of an Upper Limit for the Fraction of Interprotein Cross-Links in Large-Scale In Vivo Cross-Linking Studies （分享人:张宇星）

    题目:Prediction of an Upper Limit for the Fraction of Interprotein Cross-Links in Large-Scale In Vivo ...