2024年10月localstorage跨域访问（html5 localstorage 可以跨域吗）
⑴localstorage跨域访问（htmllocalstorage可以跨域吗
⑵htmllocalstorage可以跨域吗
⑶实数据量很大，有很多的历史记录需要存在本地。用一个变通的办法，数据还是存在localStorage里，等到要用的时候，抽取特定的几条写到自己的域下面，需要读的时候，再从自己的域下面读。这样就可以解决的
⑷--百度地图api和qiankunjs的script劫持引起的问题
⑸首先，我们梳理一下百度地图加载的过程。我们在页面的html底下写了一条百度地图的script，页面在初始化的时候，会加载这条script，这条script会引入BMap这个全局变量，以及一些处理函数（比如我们下面要讲到的_jsload，然后会检测localstorage里面有没有需要的一些变量，没有的话，再次写一个标签，形如api.map.baidu./getmodules？这样src的script，由于是script标签引入的，所以没有跨域的问题，这条脚本会加载一条条函数，放到全局window底下去实现，把一些处理函数放到localstorage里面。接着有趣的事情发生了，由于qiankunjs用了自己写的import-html-entry来劫持script标签，把这条标签注视掉，然后发起一个通用的fetch来请求这些资源，这样就导致了那些用script标签引入的资源会导致跨域错误。可以的解决办法：看了源码，发现在用qiankunjs启动的时候，跨域传入一个opts参数，这条参数，可以写入一个fetch请求，如果没有这个fetch，则使用浏览器自带的fetch，这个地方就给我们留了条口子来hack说干就干，针对那些有callback的src，我们就可以认为他是jsonp请求，这部分我们拆开来处理，其余的则按照fetch来处理，这里需要注意的是fetchjsonp会写一条标签，这个标签我们得放到document底下，不然依然会被qiankunjs劫持，导致死循环。这样的话，依然会发生上面跨域的问题，为什么呢？原因在于形如api.map.baidu./getmodules？这样的标签是没有callback参数的，编者认为可能百度也就不是按照jsonp的请求来实现的，而是仅仅是写一条标签，引入这个资源罢了，但是我们还是按照统一的jsonp来封装请求他。这里有一个_jsload，这个其实是一开始的百度标签所加载的一个全局函数，写入了window底下，原本，检测出了localstorage里没有相应的内容，即会加载这几条js，来依次写入相应的内容，但是，这个地方，我们犯了个错，本意是想改写_jsload这个函数，让其能够实现原本功能外，还能监测到其执行的状态，但是，这里犯了个错，这个函数，的参数有两个，但是我们只写了一个，导致后面的内容变成了undefined，从而后续结果报错，这里编者之前还有点纠结一个问题，即换了名字可以成功请求，使用_jsload却不能成功，后来经过查验发现，由于使用的名字不是_jsload，但是返回的依然是_jsload，导致不能访问到我们自定义的callback，然后导致超时，抛出了自定义错误，由于没有捕获，所以我们查看不到，另一方面，虽然导致了自定义错误，但是，由于使用fetchjsonp，这条标签其实是写到document底下的了，然后就自然的加载了资源，在全局window底下执行_jsload这个函数，未改其名字前，由于写入的参数错误，导致第二个参数成了undefined，导致写入localstorage错误，从而导致后续错误。总结：这次事件首先我对百度地图加载资源就不太清楚，开始就没有发现是localstorage的问题，然后梳理了一下百度地图加载过程之后，这个事情其实也就比较清楚了，解决方案因人而异，这里是我们的解决方案，并且因此导致的一些问题，谨作记录！
⑹不同域名之间共享localStorage/sessionStorage
⑺两个不同的域名的localStorage不能直接互相访问。那么如何在aaa.中如何调用bbb.的localStorage?.在aaa.的页面中，在页面中嵌入一个src为bbb.的iframe，此时这个iframe里可以调用bbb.的localStorage。.用postMessage方法实现页面与iframe之间的通信。综合、便可以实现aaa.中调用bbb.的localStorage。我们可以在bbb.中写一个专门负责共享localStorage的页面，例如叫做page.html，这样可以防止无用的资源加载到iframe中。以在aaa.中读取bbb.中的localStorage的item为例，写同理：bbb.中page.html，监听aaa.通过postMessage传来的信息，读取localStorage，然后再使用postMessage方法传给aaa.的接收者。在aaa.的页面中加入一个src为bbb./page.html隐藏的iframe。在aaa.的页面中加入下面script标签。在页面加载完毕时通过postMessage告诉iframe中监听者，读取item。监听bbb.传回的item的值并输出。
⑻localstorage的跨域存储方案
⑼html标准中一个亮点就是提供了浏览器本地存储的功能。方式有两种：localStorage和sessionStorage。相对于cookie，他们具有存储空间大的特点，一般可以存储M左右，而cookie一般只有k。localStorage和sessionStorage的主要区别是：localStorage的生命周期是永久的，意思就是如果不主动清除，存储的数据将一直被保存。而sessionStorage顾名思义是针对一个session的数据存储，生命周期为当前窗口，一旦窗口关闭，那么存储的数据将被清空。当然作为孪生兄弟，两者也有很多相同点。比如存取数据的方法就是一样的。另外，不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的localStorage，但是不同页面间无法共享sessionStorage的信息。这里需要注意的是，页面仅指顶级窗口，如果一个页面包含多个iframe且他们属于同源页面，那么他们之间是可以共享sessionStorage的。在实际开发过程中，遇到的最多的问题就是localStorage的同源策略问题。为了了解这个问题，我们先得清楚什么是同源策略。同源策略（same-originpolicy是浏览器执行的一种安全措施，目的是为了保证用户信息的安全，防止恶意的网站窃取数据。浏览器的同源策略具体如下：只要不同源就不能共享localStorage的数据。但是在实际开发中又时常会遇到这样的需求，那我们该如何解决呢？目前广泛采用的是postMessage和iframe相结合的方法。postMessage(data
⑽localstorage
⑾localStorage,sessionSorage他们的区别主要是生存期.使用方法:主要是数组，对象转为字符串存储在电脑里面，然后使用的时候在转回来.作用域.生存期.数据结构.过期时间:自己设置在存入数据的时候加入当前时间戳，但后在取出数据的时候对这个进行检查，然后对比时间是否过期，然后进行.容量限制：M.域名限制：无法进行跨域，也无法让子域名继承父域名的localStorage数据.异常处理：try/catch.测试浏览器是否支持localStorage：虽然一般的浏览器使用window.localstorage可以检测是否支持，但是还是会出现无法setItem这样低级的bug,所以.ios设备上无法重复setItem().另外，在Iphone上设置setItem有时会出现报错，这个时候需要先removeItem，然后在设置setItem.store.js:就是兼容做的比较好，封装了几个api。不过如果在实际使用过程中，肯定也能开发出来类似的方法，可以看一下他是怎么检测到浏览器的版本的。.还有就是这个库时不npminstall然后使用的。
⑿sessionStoragelocalStorage和cookie之间的区别转
⒀sessionStorage和localStorage是HTMLWebStorageAPI提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。WebStorage带来的好处：减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储，也可以在服务器端存储。浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的session对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递sessionid即可，服务器根据sessionid找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据安全一些，浏览器只适合存储一般数据。sessionStorage、localStora
⒁localstorage跨域&&跨浏览器
⒂localstorage无法跨域（同源策略的限制，无法跨浏览器；
⒃localstorage可通过storageevent数据变化监听；
⒄必须通过flash实现跨浏览器，因为不同的浏览器使用的flash都是同一个。因此，使用flashcookie就可以实现这样的功能；
⒅postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：
⒆通过postMessage向【其他域】发送跨域消息；window.parent.postMessage()iframe.contentWindow.postMessage()监听跨域消息window.addEventListener(’message’,fn);
⒇htmllocalstorage支持跨域吗
⒈LocalStorage是不能跨域的，但是，可以借助postMessage和iframe来实现跨域的数据读取。参考iframe实现跨.