localStorage和sessionStorage使用
localStorage.setItem("key","value");//存数据
localStorage.getItem("key");//取数据
localStorage.removeItem("key");//删除数据
localStorage.clear();//清空数据
sessionStorage使用用法和localStorage一样
sessionStorage是会话缓存
localStorage是持久缓存
这里简单封装了一个,默认缓存7天,获取数据时判断数据是否过期
/**
* 设置缓存数据
* 默认缓存一个星期
* @param key
* @param value
* @param exp 缓存时间(d天数,h小时,m分钟,s秒【例:7d=7天,7h=7小时,7m=7分钟】)
*/
function lStorage_set(key,value,exp) {
var timestamp = new Date().getTime();
if(typeof exp != "undefined"){
if (endWith(exp,'d')) {
exp = timestamp + parseInt(exp.replace('d','')) * 1000 * 60 * 60 * 24;
} else if(endWith(exp,'h')){
exp = timestamp + parseInt(exp.replace('h', '')) * 1000 * 60 * 60;
} else if (endWith(exp, 'm')) {
exp = timestamp + parseInt(exp.replace('m', '')) * 1000 * 60;
} else if (endWith(exp, 's')) {
exp = timestamp + parseInt(exp.replace('s', '')) * 1000;
} else {
exp = timestamp + exp;
}
}else{
exp = timestamp + (1000 * 60 * 60 * 24 * 7);
}
localStorage.setItem(key, JSON.stringify({data: value, exp: exp}));
} /**
* 获取缓存数据
* @param key
* @returns {null}
*/
function lStorage_get(key) {
var data = localStorage.getItem(key);
if(data == null){
return null;
}
var timestamp = new Date().getTime();
var dataObj = JSON.parse(data);
if(timestamp < dataObj.exp){
return dataObj.data;
}else{
localStorage.removeItem(key);
return null;
}
}
/**
* 判断data结尾是否是end
* @param data
* @param end
* @returns {boolean}
*/
function endWith(data,end){
var d = data.length - end.length;
return (d >= 0 && data.lastIndexOf(end) == d);
}
localStorage和sessionStorage使用的更多相关文章
- 似懂非懂的localStorage和sessionStorage
一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...
- html5存储方式localstorage和sessionStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...
- localstorage 和 sessionstorage 本地存储
在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...
- Cookie, LocalStorage 与 SessionStorage
Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点 同属于html5 ...
- localStorage与sessionStorage 的区别
通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- localStorage和sessionStorage
首先自然是检测浏览器是否支持本地存储. 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存 ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
- HTML5本地存储之localStorage、sessionStorage
1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...
随机推荐
- git (转载)
文章转载 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的 ...
- 【LeetCode】Rotate List
Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...
- appium():PageObject&PageFactory
Appium Java client has facilities which components to Page Object design pattern and Selenium PageFa ...
- POJ1006 Biorhythms —— 中国剩余定理
题目链接:https://vjudge.net/problem/POJ-1006 Biorhythms Time Limit: 1000MS Memory Limit: 10000K Total ...
- html5--5-7 绘制圆/弧
html5--5-7 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...
- 新版ycsb运行mapkeeper成功
bin/ycsb load mapkeeper -P workloads/workloada 首先,按照上面一个帖子将mapkeeper的jar包进行mvn安装,修改ycsb主目录和mapkeeper ...
- docker安装mysql挂载宿主本地目录资源后无法启动的问题
可能是权限问题,添加--privileged=true参数: docker run -p : --name zsmysql -v $PWD/data:/var/lib/mysql -v $PWD/lo ...
- 【CQ18高一暑假前挑战赛4】标程
[二分或者STL] 二分: #include<bits/stdc++.h> using namespace std; ; int a[maxn]; int main() { ,pos; s ...
- poj2226Muddy Fields——二分图匹配
题目:http://poj.org/problem?id=2226 把行连通块作为左部点,列连通块作为右部点,行列连通块有相交的格子就连边: 则问题转化为求最小点覆盖,即最大匹配. 代码如下: #in ...
- asio 中strand的作用
namespace { // strand提供串行执行, 能够保证线程安全, 同时被post或dispatch的方法, 不会被并发的执行. // io_service不能保证线程安全 boost::a ...