文档章节

html5 sessionStorage 与 localStorage使用详解

Adam-Lee
 Adam-Lee
发布于 2012/08/22 22:13
字数 593
阅读 16896
收藏 23

html5中的Web Storage包括了两种存储方式: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方法了

*/

                                                                                                                     Aug 23th,2012   李汉团

© 著作权归作者所有

Adam-Lee
粉丝 50
博文 118
码字总数 166965
作品 0
深圳
程序员
私信 提问
加载中

评论(1)

赵明亮v
赵明亮v
学习了,感谢楼主
网站页面间脚本传至 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
2018/07/10
0
0
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEB_HTML5在LBS社区中的应用 5、WebQQ_3.0:...

邓剑彬
2012/11/30
1K
6
网站页面间脚本传值 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
02/20
0
0
JS 详解 Cookie、 LocalStorage 与 SessionStorage

基本概念 Cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过...

飞翔的熊blabla
01/14
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
661
1

没有更多内容

加载失败,请刷新页面

加载更多

你知道多少this,new,bind,call,apply?那我告诉你

那么什么是this,new,bind,call,apply呢?这些你都用过吗?掌握这些内容都是基础中的基础了。如果你不了解,那还不赶快去复习复习,上网查阅资料啥的! 通过call,apply,bind可以改变thi...

达达前端小酒馆
今天
4
0
设计模式之命令模式

命令模式的类图 其中的角色有: Client 客户端。只依赖于调用者Invoker、接收者Receiver、以及Command(网上找的图片这里没有画出来),不用关注接收者如何执行命令,只需要告诉调用者需要执行...

陈年之后是青葱
今天
7
0
2. 彤哥说netty系列之IO的五种模型

你好,我是彤哥,本篇是netty系列的第二篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 本文将介绍linux中的五种IO模型,同时也会介绍阻塞/非阻塞与同步/异步的区别。 何...

彤哥读源码
今天
5
0
OSChina 周四乱弹 —— 喵的波粒二象性

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 小小编辑推荐:《水墨兰亭》- 李志辉 《水墨兰亭》- 李志辉 手机党少年们想听歌,请使劲儿戳(这里) @巴拉迪维 :卧室里采光要足够好,这样...

小小编辑
今天
35
1
前后端分离接口规范

最近在开发,遇到前后端关于Boolean类型的参数传参和接收的问题: 场景:后台会根据用户是否出车/是否出司机(Boolean类型)来决定后端的业务逻辑(比如费用的计算),前端使用JSON字符串类型...

code-ortaerc
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部