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存储的更多相关文章

  1. [Html5]sessionStorage和localStorage常见操作

    摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...

  2. 使用sessionStorage、localStorage存储数组与对象(转)

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  3. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  4. [Html5]sessionStorage和localStorage的区别

    摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStora ...

  5. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  6. sessionStorage和localStorage存储的转换不了json

    先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStora ...

  7. sessionStorage、localStorage 存储及如何存储数组与对象

    1.存储,获取,清楚 sessionStorage.setItem("key",val) sessionStorage.getItem("key") sessi ...

  8. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  9. HTMl5的sessionStorage和localStorage

    HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...

随机推荐

  1. hadoop配置

    配置参考博客:(目前有问题,百度说官网的是32bit,现在正在尝试64位 http://www.powerxing.com/install-hadoop-cluster/

  2. bzoj3052: [wc2013]糖果公园

    又是一代神题. uoj测速rank10,bzoj测速rank26(截止当前2016.5.30 12:58) 带修改的树上莫队. 修改很少,块的大小随便定都能A 然而我一开始把开3次根写成了pow(bl ...

  3. Beta版本冲刺第五天

    Aruba 408 409 410 428 429 431 完成任务: 数据库对于分类新建/删除的更新 调整图片再编辑界面的合适大小 调整常驻通知栏按钮的跳转逻辑 微调数据库 立会照片: 燃尽图: c ...

  4. 【Beta】Scrum09

    Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...

  5. react

    package.json ENOSPC 文件监控增加一些 echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf ...

  6. .vue文件里引用单独样式和js文件

    style只能引一个,script可以引多个

  7. EasyPusher应用

    转自https://github.com/EasyDarwin/EasyPusher 本文仅实际体验一下demo,分析一下如何应用. 1)EasyPusher框图预览 2) EasyPusher应用实 ...

  8. 【转】MySQL索引背后的数据结构及算法原理

    摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

  9. 【jQuery】选择器

    jQ提供了很多选择器:(注:$("p").action() action为后续动作) 元素选择器 $("p").action() ; //选取所有p标签 id选 ...

  10. Apache流处理框架对比

    分布式流处理,类似于MapReduce这样的通用计算模型,但是却要求它能够在毫秒级别或者秒级别完成响应.这些系统可以用DAG表示流处理的拓扑. Points of Interest 在比较不同系统是, ...