localstorage跨域共享（html5 localstorage 可以跨域吗）

本文目录

• html5 localstorage 可以跨域吗
• localstorage跨域&&跨浏览器
• 同域名项目localStorage相互影响（个人笔记）
• 【知识】浏览器的LocalStorage本地存储入门
• localstorage

html5 localstorage 可以跨域吗

实数据量很大，有很多的历史记录需要存在本地。用一个变通的办法，数据还是存在localStorage里，等到要用的时候，抽取特定的几条写到自己的域下面，需要读的时候，再从自己的域下面读。这样就可以解决的

localstorage跨域&&跨浏览器

localstorage无法跨域（同源策略的限制），无法跨浏览器；

localstorage可通过storage event数据变化监听；

必须通过flash实现跨浏览器 ，因为不同的浏览器使用的flash都是同一个。因此，使用flash cookie就可以实现这样的功能；

postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：

通过postMessage 向【其他域】发送跨域消息；
window.parent.postMessage()
iframe.contentWindow.postMessage()
监听跨域消息 window.addEventListener(’message’, fn );

***隐藏网址***

***隐藏网址***

***隐藏网址***

同域名项目localStorage相互影响（个人笔记）

1、不同浏览器无法共享localStorage和sessionStorage的值。

2、相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage值，通过跳转的页面可以共享sessionStorage值。

3、关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值，跳转有多种方式：

【知识】浏览器的LocalStorage本地存储入门

localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。

localStorage 和 sessionStorage 的区别主要是在于其生存期。

localStorage 理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各 Native App 用到的 WebView 里， localStorage 都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。
sessionStorage 的生存期顾名思义，类似于 session ，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于 sessionStorage 的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：

function set(key,value){ var curtime = new Date().getTime();//获取当前时间 localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列 } function get(key,exp)//exp是设置的过期时间 { var val = localStorage.getItem(key);//获取存储的元素 var dataobj = JSON.parse(val);//解析出json对象 if(new Date().getTime() - dataobj.time 》 exp)//如果当前时间-减去存储的元素在创建时候设置的时间 》 过期时间 { console.log("expires");//提示过期 } else{ console.log("val="+dataobj.val); } }

目前业界基本上统一为5M，已经比cookies的4K要大很多了，省着点用吧骚年。

由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。

localstorage在目前的浏览器环境来说，还不是完全稳定的，可能会出现各种各样的bug，一定要考虑好异常处理。我个人认为localstorage只是资源本地化的一种优化手段，不能因为使用localstorage就降低了程序的可用性，那种只是在console里输出点错误信息的异常处理我是绝对反对的。localstorage的异常处理一般用 try/catch 来捕获/处理异常。

目前普遍的做法是检测 window.localStorage 是否存在，但某些浏览器存在bug，虽然"支持"localstorage，但在实际过程中甚至可能出现无法setItem()这样的低级bug。因此我建议，可以通过在 try/catch 结构里 set/get 一个测试数据有无出现异常来判断该浏览器是否支持localstorage，当然测试完后记得删掉测试数据哦。

在chrome开发者工具里的 Resources - Local Storage 面板以及 Resources - Session Storage 面板里，可以看到当前域名下的localstorage数据。



***隐藏网址***

localstorage

1 .localStorage,sessionSorage 他们的区别主要是生存期
2 .使用方法:主要是数组，对象转为字符串存储在电脑里面，然后使用的时候在转回来

3 .作用域

4 .生存期

5 .数据结构

6 .过期时间:自己设置在存入数据的时候加入当前时间戳，但后在取出数据的时候对这个进行检查，然后对比时间是否过期，然后进行
7 .容量限制：5M
8 .域名限制：无法进行跨域，也无法让子域名继承父域名的localStorage数据
9 .异常处理：try/catch
10 .测试浏览器是否支持localStorage：虽然一般的浏览器使用window.localstorage可以检测是否支持，但是还是会出现无法setItem这样低级的bug,所以
11 .ios设备上无法重复setItem()
12 .另外，在Iphone 上设置setItem有时会出现报错，这个时候需要先removeItem，然后在设置setItem
13 .store.js:就是兼容做的比较好，封装了几个api。不过如果在实际使用过程中，肯定也能开发出来类似的方法，可以看一下他是怎么检测到浏览器的版本的。
14 .还有就是这个库时不npm install 然后使用的。