HTMl5的存储方式sessionStorage和localStorage详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁

因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

一、web storage和cookie的区别


Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)

二、html5 web storage的浏览器支持情况


浏览器的支持除了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操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法:
setItem存储value
用途:将value存储到key字段
用法:.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();

四、其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage; storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

五、localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

六、storage事件

storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent)
{
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
}

storage事件对象的具体属性如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change
时间: 2024-12-04 21:45:34

HTMl5的存储方式sessionStorage和localStorage详解的相关文章

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解

Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解 在swing中,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing中提供了JOptionPane类来实现类似Windows平台下的MessageBox的功能,同样在Java中也有,利用JOptionPane类中的各个static方法 来生成各种标准的对话框,实现显示出信息.提出问题.警告.用户输入参数等功能.这些对话框都是模式对话框. ConfirmDialog ---

html5的localstorage详解

HTML API localstorage在浏览器的API有两个:localStorage和sessionStorage,存在于window对象中:localStorage对应window.localStorage,sessionStorage对应window.sessionStorage.localStorage和sessionStorage的区别主要是在于其生存期. 基本使用方法 localStorage.setItem("b","isaac");//设置b为&

DELL EqualLogic PS6100存储数据恢复方法和结构详解

DELL EqualLogic PS6100采用虚拟ISCSI SAN阵列,为远程或分支办公室.部门和中小企业存储部署带来企业级功能.智能化.自动化和可靠性,支持VMware.Solaris.Linux.Mac.HPux.AIX,支持所有带有业界标准iscsi initiator的操作系统,同时提供全套企业级数据保护和管理功能.可靠的性能.可扩展性和容错功能,是中型企业级存储的起点产品. DELL EqualLogic PS6100详解: 上层应用基础配置: 可以通过连接串口先对存储进行初始化.

Android数据存储(二)----PreferenceFragment详解

?[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4020469.html 联系方式:[email protected] [正文] 一.PreferenceFragment的引入: PreferenceActivity是一个非常有用的基类,当我们开发Android项目时避免不了选项设置,这些设置习惯用Preference来保存.Android专门为

Android数据存储(一)----SharedPreferences详解

一.Android数据的存储方式: Android系统一共提供了四种数据存储方式.分别是:SharePreference.SQLite.Content Provider和File:此外还有一种网络存储.由于Android系统中,数据基本都是私有的,都是存放于“data/data/程序包名”目录下,所以要实现数据共享,正确方式是使用Content Provider. 在Android中,可以使用几种方式实现数据持久化: Shared Preferences:除SQLite数据库外,另一种常用的数据

Html5之高级-2 HTML5表单属性(属性介绍、属性详解)

一.属性介绍 属性介绍 - 有一些输入类型要求使用特定的属性才能显示效果,如前面提到过min,max,step. 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性.HTML5 标准中再原来的基础上增加了一些新的属性. - Placeholder 属性 - Nultiple 属性 - Autofocus 属性 - Form 属性 二.属性详解 Placeholder 属性 - Placeholder 属性通常用于search输入类型,也可以用在文本域.它表示一个简单提示.单词或

Redis持久化方式RDB与AOF详解

前言 Redis提供了两种数据存储方式,分别是:cache-only && persistence:cache-only顾名知义,是用与缓存服务的,数据在服务器终止后将消失,在此模式下将不存在"数据恢复"的方式,是一种安全性低.效率高.易扩展的模式:persistence即内存中的数据持久备份至磁盘文件中,在服务重启之后能够恢复数据,这种模式下数据的安全性大大提高.cache-only没有什么讲的,这里主要说明Redis的持久化存储模式.对于persistence持久化

C/C++程序内存的各种变量存储区域和各个区域详解

转自 https://blog.csdn.net/jirryzhang/article/details/79518408 C语言在内存中一共分为如下几个区域,分别是: 1. 内存栈区: 存放局部变量名:2. 内存堆区: 存放new或者malloc出来的对象:3. 常数区: 存放局部变量或者全局变量的值:4. 静态区: 用于存放全局变量或者静态变量:5. 代码区:二进制代码.知道如上一些内存分配机制,有助于我们理解指针的概念. C/C++不提供垃圾回收机制,因此需要对堆中的数据进行及时销毁,防止内