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. ubuntu下配置rails环境遇到的错误

    1.Could not find gem 'sqlite3 (>= 0)' in any of the gem sources listed in your Gemfile 解决:sudo ge ...

  2. Java诊断工具Arthas

    Java诊断工具Arthas 1. Arthas简介 Arthas是阿里开源的一个线上java诊断工具,发现阿里还是挺喜欢开源一些技术的,造福人类.昨天试用了一下,发现真是强大,解决了我工作两年的很多 ...

  3. C++模板(二)【转】

    本文转自:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html C++模板 模板是C++支持参数化多态的工具,使用模板可以使用户为类 ...

  4. CSU - 1550 Simple String —— 字符串

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1550 题解: 1.A+B 与C的交集必须>=n 2.A与C的交集必须>= ...

  5. C语言中的字符数组和字符串

    在C语言中,没有字符串类型,但是可以通过字符数组来模拟字符串. 字符串可以在栈上,堆上,静态区和常量区进行分配. char buf[50]  = "abc"; char buf[] ...

  6. 003 - 修改Pycharm的项目文件树样式

    相信习惯了Eclipse或者Windows的小伙伴对于Pycharm的目录树一定觉得特别别扭 因为它总是在文件前加一个三角形标注, 这样的标注在视觉上十分误导层级关系 修改的方式为   File -& ...

  7. cogs1070玻璃球游戏

    1070. [焦作一中2012] 玻璃球游戏 ★   输入文件:marbles.in   输出文件:marbles.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 小x ...

  8. MongoDB分析工具之三:db.currentOp()

    db.currentOp() db.currentOp是个好东西,顾名思义,就是当前的操作.在mongodb中可以查看当前数据库上此刻的操作语句信息,包括insert/query/update/rem ...

  9. JavaScript-Tool:jquery.md5.js

    ylbtech-JavaScript-Tool:jquery.md5.js 1.返回顶部 1. 引入js后 使用方法:document.write($.md5('1234')); 加密结果:81dc9 ...

  10. 阿里云CDNapi

    #!/usr/bin/env python from aliyunsdkcore import client import json from aliyunsdkcdn.request.v201411 ...