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. 配置react native遇到的问题

    折腾了两天终于解决了问题,一开始用模拟器是报如下图的错 然后用真机的时候又报下图的错 这个错误网上有很多解决方法,说是要降级处理,将build.gradle中的1.3.1改成1.2.3,但是改完之后问 ...

  2. Linux编译工具:gcc入门

    1. 什么是gcc gcc的全称是GNU Compiler Collection,它是一个能够编译多种语言的编译器.最开始gcc是作为C语言的编译器(GNU C Compiler),现在除了c语言,还 ...

  3. DedeCMS flink_add Getshell漏洞 管理员CSRF漏洞

    DedeCMS flink_add Getshell漏洞 管理员CSRF漏洞 1.漏洞利用 由于tpl.php中的$action,$content,$filename变量没有初始化,从而能操纵这些变量 ...

  4. [信安presentation]Fight against GFW

    Section1:加密 加密算法分为:对称加密算法.非对称加密算法.Hash 1.1对称加密算法 加密解密使用相同的密钥 eg:DES,AES,RC4,RC5,Triple DES 缺点:1.因为加密 ...

  5. mongodb未授权访问漏洞

    catalogue . mongodb安装 . 未授权访问漏洞 . 漏洞修复及加固 . 自动化检测点 1. mongodb安装 apt-get install mongodb 0x1: 创建数据库目录 ...

  6. Autofac 依赖注入

    介绍 Autofac是一款IOC框架,很轻量级性能非常高,自动注入很给力. NuGet Autofac:Autofac控制反转容器核心 Autofac.MVC5:提供IDependencyResolv ...

  7. centos手动编译安装apache、php、mysql

    64位centos 5.5手动安装lamp,要求curl.json.pdo_mysql.gd,记录如下. centos 5.4.5.5.5.6的内核都是2.6.18,都可以安装php 5.3. 卸载旧 ...

  8. 【转】web移动端一些常用知识

    1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...

  9. js中网页区域/正文/屏幕 宽和高

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  10. RabbitMQ安装实践

    背景: 最近一个项目的测试环境需要用到rabbitMQ,但运维和开发都没时间,于是自己试着安装了一发,发现安装很简单,记一笔如下: 安装步骤 查看官网上有不同的安装方法,可使用下载安装包或者直接通过其 ...