HTML5 Web存储--localStorage/sessionStorage

HTML5提供了2种在客户端存储的方法:

1、localStorage--没有时间限制的数据存储

2、sessionStorage --针对一个session的数据存储,会话结束时会被清空

一、作用域

作用域

localStorage在相同的协议、主机名、端口下,就能读取/修改到同一份localStorage数据

sessionStorage在上述的条件下还要求在同一个窗口,也就是只要关闭了浏览器(包括关闭标签页),就会被清空

二、VS cookie:

1、存储数据更多 ( cookie只有4k,localStorage一般5M )

2、速度快,效率高

三、数据结构

采用标准键值对数据结构,键是唯一的,重复以同一个键来赋值的话,会覆盖上次的值。

四、localStorage方法

1、特性

(1)只支持string类型

(2)浏览器在隐私模式下不可读取

(3)localStorage不能被爬虫抓取到

2、3种写入方法

var storage=window.localStorage;

第一种://写入a字段      storage["a"]=1;

第二种://写入b字段       storage.b=1;

第三种://写入c字段        storage.setItem("c", 3);

3、删除

全部清除           window.localStorage.clear( )

对某个键值对的删除              window.localStorage.removeItem(‘a’)

4、特别注意这些操作都只能对同一个域下的数据进行操作

五、sessionStorage方法

1、VS localStorage

相同:各种语法特性都相同

不同:localStorage里存的数据没有过期的时间设置,而sessionStorage里存储的数据在页面会话结束时被清除

六、localStorage的跨域问题

这一点我想重点介绍一下,因为项目设计,所以研究里好几天,但是最后由于项目不适用没有使用,但是一些知识想整理出来

这里我们使用HTML5的postMessage并结合iframe进行跨域

我们模拟一个场景:将http://a.com/index.html页面中的用户信息带到http://b.com/index.html中去

1、流程如图所示:

image2

1)、在a.com里插入一个iframe,并指向b.com

2)、a.com通过postMessage传递指定格式的消息给b.com

3)、b.com解析a.com传递过来的消息内容,调用localStorage API操作本地数据

4)、b.com使用localStorage中的数据

2、细小知识点

我使用的过程中遇到的一些小的知识点我也想和大家一起学习一下

获取iframe时,我们可以使用window.frames来获取全部iframe对象,相当于document.getElementsByTagName( "iframe" )

3、代码(此处只写js代码)

http://a.com/index.html

var domain = ‘http://b.com/index.html‘; //定义目标域名

var message = {userId:1,userName:"wendy"}; //你在这里也可以传递一些数据,obj等

//发送消息和目标URI

window.frames[0].contentWindow.postMessage(message,domain); //假设页面上只有一个iframe

http://b.com/index.html

//响应事件

window.addEventListener(‘message‘,function(event) {

if(event.origin !== ‘http://a.com/index.html‘) return;

console.log(‘message received:  ‘ + event.data,event);//这里的event.data就是刚刚传过来的用户信息

},false);

4、结果

结果我这样操作后,event.data里面拿不到任何有用信息,为什么呢?

因为我的需求是从http://a.com/index.html跳转到http://b.com/index.html,在打开http://b.com/index.html时a.com已经销毁,也就没有那样的iframe存在来发送数据,所以拿不到数据;也就是说必须得在父页面中包含子页面时这种方案才可行。

前端小白,以上是我的个人理解,如有错误,忘批评指正,谢谢大家

参考资料:

http://annn.me/cross-domain-local-storage/

http://www.jianshu.com/p/e86d92aeae69

http://blog.csdn.net/monkindey/article/details/23659387

http://www.haorooms.com/post/window_postMessage

时间: 2024-10-05 06:13:26

HTML5 Web存储--localStorage/sessionStorage的相关文章

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

HTML5 web存储

HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 浏览器支持 Internet Explorer 8+, Firefox, Opera, C

加速HTML5应用的九大方法-------3.使用 HTML5 Web 存储

加速HTML5应用的九大方法-------3.使用 HTML5 Web 存储你需要在浏览器上存储一些数据时,你可能会首先考虑到 Cookie,这些 Cookie 在每次浏览器请求时都会附带上.而 HTML5 更有效的方法就是本地存储 -- Web Storage.有两个 Web Storage 对象分别是:sessionStorage 和 localStorage ,这些存储的数据是不会通过 HTTP 请求来传输的,因此不会对请求的时间参数任何影响,下面是一小段示例代码:// check to

HTML5 Web存储 页面间进行传值

在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可以在本地存储用户的浏览数据.Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以“键/值”对存在, web网页的数据只允许该网页访问使用 方法: localStorage 和 sessionStorage

客户端存储之HTML5 web存储

最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别. web存储与cookie的区别以及优势: 1.cookie只适合存储少量文本数据,而web存储可存储大量数据 2.以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地 3.web storage有更加丰富易用的接口,比如setItem().getItem().re

HTML5 Web存储(Web Storage)技术及用法

在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣,它就是Web存储(Web Storage).Web存储(Web Storage)提供了一个在浏览器端保存用户会话信息的方法.下面让我们来看一看Web存储(Web Storage)的基本用法! Web存储(Web Storage)基本要领 存储的数据可以是任何类JSON的结构化数据. 存储的数据不会

使用HTML5 Web存储的localStorage和sessionStorage方式

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStora

HTMl5的存储方式sessionStorage和localStorage详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储.而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. 一.web storage和cookie的区别 Web Stora

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一