HTML5 Web存储--localStorage/sessionStorage

HTML5

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存在来发送数据,所以拿不到数据;也就是说只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机  (两个页面的模数Document.domain设置为相同的值) 时,这两个脚本才能相互通信。

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

参考资料:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容