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保存的数据用于浏览器的一次会话,当会话结束 ...
随机推荐
- 点击文本选中checkbox
<checbox文本编辑/> : 只点击checkbox时,才可以选中,点击文本时无法选中 <label><checbox文本编辑/></label ...
- CAN协议与CANOpen协议
这里详细介绍了CAN协议中数据通信帧每位的含义,有图片,值得一看:https://www.cnblogs.com/pejoicen/p/3986587.html 这里介绍了CanOpen协议,http ...
- 【Effective C++】让自己习惯C++
条款01:视C++为一个语言联绑 C++的四个语言层次: C:C++是以C为基础的.基本数据类型.语句.预处理器.数组.指针等统统来自C. Oject-Oriented C++:面向对象这一特性包含了 ...
- javascript 正则表达式 详细入门教程
1.什么是正则表达式 定义: 一个用来搜索.匹配.处理一些符合特定语法规则的一个强大的字符串处理工具. 用途: 进行特定字符和字符串的搜索 替换字符串中指定的字符或字符串 验证字符串是否符合需求 2. ...
- UIView封装动画--iOS 利用系统提供方法来做弹性运动
iOS 利用系统提供方法来做弹性运动 /*创建弹性动画 damping:阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 velocity:弹性复位的速度 */ [UIView animateWith ...
- charles刷分微信跳一跳小程序对https的理解
以前以为只要安装了https 客户端与服务端的数据会被加密就安全了 事实上 只要任意一款抓包工具 并伪造证书 就可以解密这个被所谓https加密的数据 如 可以下载charles的根证书 作为伪 ...
- ModuleNotFoundError: No module named 'numpy.core._multiarray_umath' ImportError: numpy.core.multiarray failed to import
出现以下错误:可能是因为你的numpy版本太低 更新numpy的版本 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --upgra ...
- x264 FFmpeg Options Guide
https://sites.google.com/site/linuxencoding/x264-ffmpeg-mapping x264 FFmpeg Options Guide Please Not ...
- rc.local 开启自启动,检测是否成功
rc.local /etc/init.d/nginx start 查看运行状态 systemctl status rc-local ● rc-local.service - /etc/rc.local ...
- BZOJ 1623 [Usaco2008 Open]Cow Cars 奶牛飞车:贪心
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1623 题意: 编号为1到N的N只奶牛正各自驾着车打算在牛德比亚的高速公路上飞驰.高速公路有 ...