localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。

sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会

  • localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

  • 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

  • localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

    sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

  • 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

  • 同源的判断规则:

    http://www.test.com

    https://www.test.com (不同源,因为协议不同)

    http://my.test.com(不同源,因为主机名不同)

    http://www.test.com:8080(不同源,因为端口不同)

  • localStorage和sessionStorage使用时使用相同的API:

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    枚举localStorage的方法:

    for(var i=0;i<localStorage.length;i++){

    var name = localStorage.key(i)​;

    var value = localStorage.getItem(name);​

    }

    删除localStorage中存储信息的方法:

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();​//清空localStorage中所有信息

  • 通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。

    例如:

    localStorage.key = {value1:"value1"}​;

    localStorage.key.value1='a'​;

    这里是无法​对实际存储的值产生作用的,下面的写法也不可以:

    ​localStorage.getItem("key").value1="a";

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

storage的更多相关文章

  1. Azure Queue Storage 基本用法 -- Azure Storage 之 Queue

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在<Azure File Storage 基 ...

  2. Azure File Storage 基本用法 -- Azure Storage 之 File

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在<Azure Blob Storage 基 ...

  3. HTML5_06之拖放API、Worker线程、Storage存储

    1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象:  var 全局变量=null;  src.ondragstart=function(){   全局变量=数据值;  ...

  4. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  5. MySQL报错:Got error 28 from storage engine

    今天碰到数据库出错: Got error 28 from storage engine 查了一下,数据库文件所在的盘应该没事,应该是数据库用的临时目录空间不够 问题原因: 磁盘临时空间不够导致. 解决 ...

  6. Html 5 Web Storage

    HTML5 中使用Web Storage 技术进行本地存储,能够在Web 客户端进行数据存储.WebStorage 曾今属于HTML5的规范,目前已经被独立出来形成单独的规范体系.简单来说使用Web本 ...

  7. Azure Blob Storage 基本用法 -- Azure Storage 之 Blob

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在<Azure Table storage ...

  8. Azure Table storage 基本用法 -- Azure Storage 之 Table

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table,其中的 Table 就是本文的主角 Azure Tabl ...

  9. Windows Azure Storage (6) Windows Azure Storage之Table

    <Windows Azure Platform 系列文章目录> 最近想了想,还是有必要把Windows Azure Table Storage 给说清楚. 1.概念 Windows Azu ...

  10. [New Portal]Windows Azure Storage (14) 使用Azure Blob的PutBlock方法,实现文件的分块、离线上传

    <Windows Azure Platform 系列文章目录> 相关内容 Windows Azure Platform (二十二) Windows Azure Storage Servic ...

随机推荐

  1. Spring Java-based容器配置(二)

    组装Java-based的配置 使用@Import注解 跟在Spring XML文件里使用<import>元素加入模块化的配置相似,@Import注解同意你载入其它配置类中的@Bean定义 ...

  2. Hibernate每个具体类一张表映射(使用注释)

    在每个类创建一张表的情况下, 表中不使用Null值的列. 这种方法的缺点是在子类表中创建了重复的列. 在这里,我们需要在父类中使用@Inheritance(strategy = Inheritance ...

  3. 四个 jQuery 方法:

    append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容

  4. Linq源代码阅读

    在 System.Core dotnet451\source\ndp\fx\src\core\system\linq\enumerable.cs Where 和 Select 内 ,把数组和List分 ...

  5. SAP ABAP 常见系统变量

    因为版权的问题,纯手工打,且行且珍惜. SY-PAGEO  当前页号 SY-LSIND 列表索引页 SY-DATUM 当前日期 SY-UZEIT 当前时间 SY-LISTI 上一个列表的索引 SY-L ...

  6. for循环的执行循序

    先上一段代码,大家说出此方法的执行结果: public class Print{ static boolean out(char c){ System.out.println(c); return t ...

  7. java中訪问修饰符

    较之c++ 中 public,proctected, private 三种訪问控制, java多了默认訪问控制. java中四种訪问控制权限 简单描写叙述为一下四句: 1)private 仅本类可见 ...

  8. mysql 集群的一些概念

    读写分离: 主备机有 master-master方式,mysql自己提供两个机器之间的备份 binlog方式,一个机器master 用于写数据,一个用于读数据,写数据的那个机器也应有读读功能,有既有读 ...

  9. 系统时钟和UART的设置

    系统时钟: 在开发版上,不同的器件运行在不同的时钟频率上,如CPU可能运行在400Mhz的频率上.SDRAM.DM9000等内存存储运行在100Mhz~133MHz上. 串口i2c等运行在50Mhz上 ...

  10. 使用jenkins进行Android的持续集成

    关于持续集成的定义和意义可以参考它的 百度百科 主要意义有以下几点: 减少风险 减少重复过程 任何时间.任何地点生成可部署的软件 增强项目的可见性 建立团队对开发产品的信心 持续集成的实施 持续集成的 ...