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使用的更多相关文章

  1. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  2. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  3. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

  4. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  5. localStorage与sessionStorage 的区别

    通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. localStorage和sessionStorage

    首先自然是检测浏览器是否支持本地存储. 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存 ...

  8. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  9. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  10. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

随机推荐

  1. STM32 CAN通信

    最近在STM32上开发CAN通信相关内容,转载一篇个人认为不错的文章,看完了基本算明白了,能够实际操作了. 原文地址:  https://blog.csdn.net/ludaoyi88/article ...

  2. xcode7和ios9下UIWebView不能加载网页的解决方法

    错误描述: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecu ...

  3. contentprovider 实例

    Provider端 public class PersonProvider extends ContentProvider { //用来存放所有合法的Uri的容器 private static Uri ...

  4. view 视图生命周期

    layout控制当前view的布局,onlayout控制子view的布局,容器ui会用到 onIntercept在父亲这执行拦截,子视图可通过requestDisallow请求父亲不要拦截

  5. JTLParser-linux上jmeter的jtl文件二次分析

    解析JMeter的JTL文件 2013年01月30日 ⁄ 综合 ⁄ 共 1452字 ⁄ 字号 小 中 大 ⁄ 评论关闭   http://code.google.com/p/xtoolkit/wiki ...

  6. NOIP2010_T4_引水入城 bfs+贪心

    在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个 N 行 M 列的矩形,如上图所示,其中每个格子都代表一座城 市,每座城市都有一个海拔高度.为了使 ...

  7. Java接口测试之使用有道翻译API

    写接口测试框架,找了有道翻译API来当测试数据 package com.httpGetTest; import java.beans.Encoder; import java.net.URLEncod ...

  8. zk使用通知移除节点

    前面:https://www.cnblogs.com/toov5/p/9899238.html 服务发生宕机 咋办? 发个事件通知,告知大家哟, 会有通知事件哦 看项目: 服务端: package c ...

  9. ansible j2文件注意事项

    j2文件中使用变量的时候,不需要 {{}} 遇到if,for等条件判断语句,变量的话,只需要变量名即可, 字符串需要 加上引号.

  10. IPFS - 可快速索引的版本化的点对点文件系统(草稿3)

    摘要 星际文件系统是一种点对点的分布式文件系统, 旨在连接所有有相同的文件系统的计算机设备.在某些方面, IPFS类似于web, 但web 是中心化的,而IPFS是一个单一的Bittorrent 群集 ...