html5 sessionStorage 与 localStorage存储
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 浏览器支持情况: 浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
要判断浏览器是否支持localStorage可以使用下面的代码:
if(window.localStorage){ alert("浏览支持localStorage")}else{ alert("浏览暂不支持localStorage")}//或者if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage")} localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in"); getItem获取value用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site"); removeItem删除key用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("key"); localStorage.removeItem("site"); clear清除所有的key/value用途:清除所有的key/value
用法:.clear()
代码示例:
sessionStorage.clear(); localStorage.clear();
使用实例: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type='button' onclick='set_item()' value='存值' />
<input type='button' onclick='get_item()' value='取值' />
<input type='button' onclick='delete_item()' value='删除' />
<script>
//localStorage 存值永久有效
function set_item(){
var user = {};
user.name = 'Adam Li';
user.age = 25;
user.home = 'China';
localStorage.setItem('userinfo',JSON.stringify(user));
}
//localStorage取值
function get_item(){
var data = JSON.parse(localStorage.getItem('userinfo'));
alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home);
}
//localStorage删除指定键对应的值
function delete_item(){
localStorage.removeItem('userinfo');
alert(localStorage.getItem('userinfo'));
}
</script> /* sessionStorage使用方法请参照localStorage使用例子,实际应用要用哪个关键看你需求了,如果是要永久保存的,那么就请使用localStorage方法存取值,如果是要浏览关闭会话结束就清除缓存的,当然就得选择sessionStorage方法了 */
html5 sessionStorage 与 localStorage存储的更多相关文章
- [Html5]sessionStorage和localStorage常见操作
摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...
- 使用sessionStorage、localStorage存储数组与对象(转)
http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...
- 使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...
- [Html5]sessionStorage和localStorage的区别
摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStora ...
- HTML5 WEB Storage - localStorage存储位置在哪
localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...
- sessionStorage和localStorage存储的转换不了json
先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStora ...
- sessionStorage、localStorage 存储及如何存储数组与对象
1.存储,获取,清楚 sessionStorage.setItem("key",val) sessionStorage.getItem("key") sessi ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- HTMl5的sessionStorage和localStorage
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
随机推荐
- webstorm 常用快捷键
webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目.今天整理了一些webstorm比较实用的快捷键: Ctrl+/ 或 Ctrl+Shift+/ 注释(// ...
- ASP.NET web.config中的连接字符串
在ASP.NET的web.config中,可以用两种方式来写连接字符串的配置. <configuration> <appSettings> <add key=" ...
- 把url参数转化成一个对象返回
var readUrlToParams = function () { var url = location.href; var nameValue; var paraString = url.sub ...
- 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法
原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者jdk并配置好环境变量.(2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本不一致 ...
- BZOJ 2006: [NOI2010]超级钢琴
2006: [NOI2010]超级钢琴 Time Limit: 20 Sec Memory Limit: 552 MBSubmit: 2613 Solved: 1297[Submit][Statu ...
- linux安装apache
我的linux是用阿里云上的,版本是CentOS 6.5 apache依赖于apr.apr-util和pcre,所以需要先安装这三个 apr(包含apr.apr-util和apr-iconv)是apa ...
- EntityFramework错误:Unable to update the EntitySet because it has a DefiningQuery
错误截图: 解决方法: 在所操作的数据库表中添加一个主键即可解决此问题
- NOIp 1109
停课后的第一场模拟赛,应该不会怎么说今天的模拟赛,除了第一题不知道那种筛法的复杂度是$log$的没敢写,其他都挺水的.另外,第三题的数据也弱化了,建议去这里再交一遍. 贴一下AC代码,有兴趣可以参考一 ...
- 163邮箱问题:554 DT:SPM 163 smtp5,D9GowACHO7RNWNdXmXs1Bw--.9035S2
最近公司需要开发一个自定义邮箱功能,上网查询一下,利用163邮箱发送邮件. 由于163 的反垃圾机制,(坑爹机制.) 一般出现 554有在1)测试中用了test,测试,关键字在主题或者内容里面. 但是 ...
- 关于elasticsearch和kibana的时区和日期问题
elasticsearch原生支持date类型,json格式通过字符来表示date类型.所以在用json提交日期至elasticsearch的时候,es会隐式转换,把es认为是date类型的字符串直接 ...