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大 ...
随机推荐
- 信贷业务(Ali)
1.信贷业务视角 信贷业务主要有两个视角,借款人和出资机构.借款人关心借多少钱,还多少钱,多少利息:机构关心信贷资产风险,收益. 领域模型上两个视角分开:个人--->账单.机构--->资产 ...
- php注释规范
注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...
- elasticsearch高级配置二----线程池设置
一个Elasticsearch节点会有多个线程池,但重要的是下面四个: 索引(index):主要是索引数据和删除数据操作(默认是cached类型) 搜索(search):主要是获取,统计和搜索操作(默 ...
- Qt——组件位置随窗口变化
当我们用Qt Designer设计界面时,有时会面临这样一个问题:需要在窗口指定位置放置组件,并且当窗口位置大小改变时,该组件相对其父对象的位置是不变的,如下面两幅图所示 ,首先看上面这幅图,注意bu ...
- div 加载 html页面的方法
做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下: <div class="main-container&quo ...
- MBProgressHUD 显示后,为何不能点击屏幕其他地方
解决办法: hud.userInteractionEnabled= NO; 就是这么简单粗暴!这个问题 我一定要发到首页候选区! /********************************* ...
- 分享iOS开发常用(三方类库,工具,高仿APP,实用网站,技术干货)
一 . JSONModel (三方类库会有更新,建议大家在线下载) http://pan.baidu.com/s/1i5ybP1z 二.AFNetworkiong http://pan.baidu. ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
- PostgreSQL杀掉死锁的链接
查到对应的用户的活动连接: select * from pg_stat_activity where username="xxx"; 杀掉死锁的连接: select pg_term ...
- hadoop-2.7.1伪分布环境搭建
1.准备Linux环境 1.0 点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet i ...