localStorage应用（写的时间缓存在本地浏览器）
最近用了下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应用（写的时间缓存在本地浏览器）的更多相关文章
- localstorage实现带过期时间的缓存功能
前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求. 1.cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效 ...
- 请求网络图片缓存到本地 ,还有一些现成的图片加载框架的使用 Ace网络篇(一)
现在去买年货~~~~~~ 占坑, 现在来填坑 填完睡觉,感谢这俩月的把自己往死里逼得奋斗从JAVA什么都不懂到现在,做这些也是给在自学路上的新人(我也是菜鸟)一点点我力所能及的帮助,等我水平更高了还会 ...
- java 手写 jvm高性能缓存
java 手写 jvm高性能缓存,键值对存储,队列存储,存储超时设置 缓存接口 package com.ws.commons.cache; import java.util.function.Func ...
- 亿级流量客户端缓存之Http缓存与本地缓存对比
客户端缓存分为Http缓存和本地缓存,使用缓存好处很多,例如减少相同数据的重复传输,节省网络带宽资源缓解网络瓶颈,降低了对原始服务器的要求,避免出现过载,这样服务器可以更快响应其他的请求 Http缓存 ...
- Visual Studio 2010 SP1 在线安装后，找到缓存在本地的临时文件以便下次离线安装
由于在下载Visual Studio 2010安装程序(大约3G左右)的时候速度飞快,大约几分钟下载完毕(多线程下载工具下载),所以笔者在继续安装Visual Studio 2010 SP1的时候也选 ...
- .Net Core 跨平台开发实战-服务器缓存：本地缓存、分布式缓存、自定义缓存
.Net Core 跨平台开发实战-服务器缓存:本地缓存.分布式缓存.自定义缓存 1.概述 系统性能优化的第一步就是使用缓存!什么是缓存?缓存是一种效果,就是把数据结果存在某个介质中,下次直接重用.根 ...
- CentOS7利用yum缓存搭建本地源
CentOS7利用yum缓存搭建本地源 环境说明 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 ( ...
- android异步加载图片并缓存到本地实现方法
图片过多造成内存溢出,这个是最不容易解决的,要想一些好的缓存策略,比如大图片使用LRU缓存策略或懒加载缓存策略.今天首先介绍一下本地缓存图片 在android项目中访问网络图片是非常普遍性的事 ...
- IOS把图片缓存到本地的几种方法
把图片缓存到本地,在很多场景都会用到,如果是只储存文字信息,那建一个plist文件,或者数据库就能很方便的解决问题,但是如果存图片到沙盒就没那么方便了.这里介绍两种保存图片到沙盒的方法. 一.把图片转 ...
随机推荐
- 使用tf serving-gpu时，没有安装NVIDIA时报的错？
当部署tf serving-gpu时,出现上述的错误,有两种情况: 1.服务器中已经安装NVIDIA驱动了,只是版本比较低了,需要升级一下比较新的nvidia驱动: 2.就是服务器中没有安装NVIDI ...
- iTerm2 都不会用，还敢自称老司机？（上）
对于需要长期与终端打交道的工程师来说,拥有一款称手的终端管理器是很有必要的,对于 Windows 用户来说,最好的选择是 Xshell,这个大家都没有异议.但对于 MacOS 用户来说,仍然毋庸置疑, ...
- SpringBoot图文教程14—SpringBoot集成EasyExcel「上」
有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...
- ES6拓展的对象功能
前言:因为之前看过很多的博客啊,书籍啊但是最后都雁过无痕,再问我基本没什么印象,所以就迫使自己看书的时候记点笔记,因为懒得写字[捂脸],现在是打字比写字要快好多,所以就写博客吧! ES6规范明确定义了 ...
- 一起了解 .Net Foundation 项目 No.17
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Peachpie Comp ...
- spring boot 学习笔记（一）
学习链接:http://www.cnblogs.com/ityouknow/category/914493.html 定义 spring boot 是由pivotal 团队提供的权限框架,设计目的是用 ...
- C++ 阶乘求和
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> long long reslut( ...
- （转）C++中的new
转载自:http://blog.csdn.net/sparkliang/article/details/3650324 C++中的new其实是一个很糊弄人的术语,它有两种不同的含义,new运算符(ne ...
- 基于均值坐标(Mean-Value Coordinates)的图像融合算法的优化实现
目录 1. 概述 2. 实现 2.1. 原理 2.2. 核心代码 2.3. 第二种优化 3. 结果 1. 概述 我在之前的文章<基于均值坐标(Mean-Value Coordinates)的图像 ...
- Java锁的深度化--重入锁、读写锁、乐观锁、悲观锁
Java锁 锁一般来说用作资源控制,限制资源访问,防止在并发环境下造成数据错误 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized(重量级) 和 Reentr ...