html5存储方式localstorage和sessionStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
区别:localStorage无时间限制,除非主动删除数据,否则永不过期;sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
支持:IE7以及IE7以下不支持
sessionStorage和localStorage都具有相同的操作方法,例如setItem、getItem和removeItem等。
setItem:存储value,用法:setItem('key','value');
getItem:获取value,用法:getItem('key','value');
removeItem:删除指定key的value,用法:getItem('key','value');
clear:删清空所有的key/value,用法:getItem('key','value');
<p>本地存储</p>
<input type="button" value='存储到localstorage' onclick="setinfo()">
<input type="button" value="清空所有" onclick="clearAll()">
<input type="button" value="根据key删除" onclick="deleteone()">
<input type="button" value="获取" onclick="getinfo()">
<input type="button" value="遍历" onclick="ergodic()">
<p id='getvalue'></p>
<script>
//存储信息
function setinfo(){
/*if(typeof window.localStorage == 'undefined'){
alert('浏览暂不支持localStorage')
}*/
if(window.localStorage){
var Storage = window.localStorage;
Storage.setItem("city", "北京");
Storage.setItem("province", "四川");
}else{
alert("浏览暂不支持localStorage")
}
}
//删除指定key的值
function deleteone(){
window.localStorage.removeItem('city');
}
//clear清除所有的key/value
function clearAll(){
var localStorage = window.localStorage;
var sessionStorage = window.sessionStorage;
localStorage.clear();
sessionStorage.clear();
}
//获得指定key的value
function getinfo(){
var getvalue = window.localStorage.getItem('province');
alert(getvalue);
}
//遍历localstorage 使用key()和length
function ergodic(){
var storage = window.localStorage;
//遍历localstorage
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
console.log("key:"+key + "值:" + value);
} }
//纪录刷新了多少次页面
if(sessionStorage.visit){
sessionStorage.visit = Number(sessionStorage.visit) + 1;
}else{
sessionStorage.visit = 1;
}
//key:visit value: 1
document.write('刷新了页面'+sessionStorage.visit+'次') //利用try/catch处理Safari开启无痕浏览
//有一种情况,浏览器本身支持localStorage但是无法存入数据,例如Safari的无痕浏览模式
try{
window.localStorage.name=1;//能存入不会进入catch
}catch(e){
//不能写入
alert('请关闭无痕浏览')
}
</script>
html5存储方式localstorage和sessionStorage的更多相关文章
- (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...
- 前端开发本地存储之localStorage和sessionStorage
1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...
- web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- web本地存储(localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
- 使用HTML5 Web存储的localStorage和sessionStorage方式
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- HTML5本地存储之localStorage、sessionStorage
1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...
- HTML5 web存储之LocalStorage和sessionStorage
什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...
随机推荐
- java访问修饰符
了解面向对象思想的同学们,都知道"封装"这一基本特征,如何正确运用访问修饰符,恰恰能体现出封装的好坏. java访问修饰符有四个: 1)public:访问权限最高,其修饰的类.类变 ...
- 回顾java基础—Java数据类型
1 java数据类型.8种基本类型,3种引用类型 基本类型(也称:原始类型):byte.short.int.long.char.float.double.boolean 引用类型:类,接口,数组 2 ...
- UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线
一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...
- JSPatch来更新已上线的App中出现的BUG(超级详细)
JSPatch的作用是什么呢? 简单来说:(后面有具体的操作步骤以及在操作过程中会出现的错误) 1.iOS应用程序上架到AppStore需要等待苹果公司的审核,一般审核时间需要1到2周.虽然程序在上架 ...
- Android中使用java.util.Properties犯的错
今天尝试使用java.util.Properties来保存应用配置,然而遇到了好几个问题,对于熟悉此内容的来说可能都是猪一样的错误,但难免有像我一样的新手再次遇到,希望此文能有所帮助. 错误1 jav ...
- js内存泄露的几种情况详细探讨
内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使 ...
- 做一个java项目要经过那些正规的步骤
理论上应该是: 一.立项 1.项目的功能的范围.实现技术方法和细节 2.需要多少人,需要的开发周期(根据客户的需求) 3.分析成本和风险 4.有相应的利润,可以立项 二.需求调研: 三.需求评审.确定 ...
- mysql数据类型
一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC),以及近似数值数据类型(FLOAT,REAL,DOUB ...
- Python学习笔记3-字符串
格式化字符串/复合字段名 >>> import humansize >>> si_suffixes = humansize.SUFFIXES[1000] >& ...
- 2015-12-01 SQL查询语句基础
1.查询全体学生的学号与姓名select sno,snamefrom student;3.查询全体学生的详细信息select *from student;4.查询全体学生的姓名及其出生年份select ...