app应用内嵌h5页面怎么直接打开safari_localstroage过多存储满的情况下应该怎么办?...
技术很简单,业务很麻烦
在大公司,同一个域名下可能存在几十上百条业务线,每条业务线都可能因为各种理由往 localStorage 里塞东西,跨页面传数据啦、缓存啦、离线化啦、性能优化啦...,5M 看起来很多,其实很快就用完了。而开发时基本无感知,是因为大家都只访问自己的业务,但用户会访问各种业务,时间一久,很容易就存满了,凡是严重依赖 localStorage 的业务流程都存在风险,写可能出问题,读自然也会出问题。
一种容易想到的方案是,当 localStorage 存满后降级到 sessionStorage 里。看上去没啥问题,但实际业务中 app 内 h5 页面跳转常常采用新打开 webview 的方式,这么做的好处是关闭一个 webview 可以直接回到上一个页面,而不用重新加载页面,对于订单填写这类带有状态的页面就很需要这么做。新打开 webview 等于新打开一个会话,而 sessionStorage 只能存在于同一个会话中,因此 sessionStorage 无法跨页面共享。
那降级到 cookie 里呢?cookie 一共才 50 个,总大小不超过 4k,作为 backup 过于脆弱,而且还会影响请求的效率。如果后端对请求头大小做了限制,还可能产生 413 错误,导致请求被拦截。
那降级到 url 上呢?很麻烦。比如有一个交互流程是这样的:页面 A => 页面 B => 页面 C,如果页面 A 的数据要传到页面 C,就得通过页面 B 做一层中转。而且 url 长度也是有限制的。
单页应用解决跨页面传数据就很简单,改造成单页应用呢?这个就得估算成本,看老板们认不认可了,而且原有应用积累了大量的业务逻辑,没有注释,没有测试用例,需求文档散落在不知名的角落,你真能保证重新做的和原来的功能一模一样吗。
我们还可以求助客户端同学,通过 js bridge 提供一个仿 localStorage 的东西,不过要考虑版本的问题,新版 app 里使用了客户端提供的 store,怎么兼顾老版 app,而且还要考虑兼容浏览器、微信。所以这种方案也只能解决一部分问题,当然,如果 h5 的流量绝大多数都在 app 里,那么这种方案是可以解决一大部分问题的,不过客户端提供的存储可不见得比原生的存储可靠,还是得加 backup。
我们还可以求助后端同学,多加几个字段甚至多加几个接口,不过这涉及到核心业务流程的改造,风险不小,而且不见得能完全解决问题,也无法永久的解决问题。
我们还可以来一招互相伤害大法,那就是把别人存的东西都删掉。。。
localStorage 是个好东西,不用,这是因噎废食,用,又很难统一和约束各业务线的用法,一旦放开用,就总会面临存满的风险。跟你在同一个域名下做开发的人可能跟你不在同一栋楼,甚至可能不在同一个城市,你有那个影响力去统一所有人的使用规范吗。
还有一个很讨厌的事情:safari 在隐私模式下不支持 localStorage 的存取(ios11 以下),这种情况比较罕见,但如果出了客诉,也是个大坑。
问题的本质
localStorage 归根结底就两个作用:持久化存储与跨页面传数据。持久化存储不会出问题,存不进去就存不进去呗,取不出来就去其它地方取,或者不取。问题就出在跨页面传数据上,上一个页面因为 localStorage 存满导致数据没有写入,下一个页面读取数据为空,从而导致错误。
问题的根源
同一个域名共享同一个 localStorage,而同一个域名下存在过多独立的业务线,业务线之间各自为政,毫无节制的攫取公共资源,这就是 localStorage 溢出问题的根源。
就我观察的情况来看,很多公司都喜欢把 h5 页面挂在 http://i.xxx.com 或 http://m.xxx.com 下,然后通过路径划分业务,比如 http://i.xxx.com/project-a, http://i.xxx.com/project-b...,随着业务发展,越来越多的业务都加到 http://i.xxx.com 中,“公地悲剧”就无可奈何的产生了,而且积重难返。我以前在的团队也是如此,用 h5、js、css 这样的类型名称来划分目录,初期东西少,自然没问题,但后来所有应用都把资源塞到 js 文件夹、css 文件夹下,一个文件夹包含了来自五湖四海的上百个文件,维护起来十分难受。
通过应用类型划分,而不是通过业务类型划分,这是最初架构策略的问题。如果 a 业务挂在 http://a.xxx.com 下,b 业务挂在 http://b.xxx.com 下,每个业务有独立的团队维护,localStorage 从公共资源变成团队的私有财产,或许这样才能从根源上解决 localStorage 无限膨胀的问题。有网友提出对 http://i.xxx.com 进一步划分子域,其实也是这个思路。
理想的方案
假设我们回到起点,从零建设前端工程,我们怎么避免 localStorage 存满的问题?
1、划分域名。各域名下的存储空间由各业务组统一规划使用
2、跨页面传数据:考虑单页应用、优先采用 url 传数据
3、最后的兜底方案:清掉别人的存储
app应用内嵌h5页面怎么直接打开safari_localstroage过多存储满的情况下应该怎么办?...相关推荐
- 复制链接到safari浏览器打开_APP应用内嵌h5页面怎么直接打开Safari来访问链接?
var openApp=function(){ var localUrl=createScheme(); var openIframe=createIframe(); if(isIos()){ //判 ...
- app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法 参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
- 关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
- 【Appium】测试时遇到手机内嵌H5页面的切换问题
前言:H5页面简单理解就是在手机内嵌套了一些网页格式的信息,可以让手机的应用看起来更丰富一些. 而当手机内嵌H5页面时,常规的app定位方法就没法使用了,我们需要先切换到H5页面才能进行下一步的定位, ...
- iOS端内嵌H5页面 点击a标签无反应
问题1: iOS端内嵌H5页面,点击a链接无反应 解决: 一般这种问题发生在新窗口打开的情况下,也就是说 target 的值为 _blank 时会发生这个问题,改为 _self即可解决问题.或者iOS ...
- 微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存 参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
- 微信内嵌h5页面调用拍照和相册功能?
有一个问题: 在微信内嵌h5页面中通过input调用摄像头,ios既可以调用摄像头也可以选择相册,但android只能选择相册,按照网上的兼容性(就是根据capture属性的有无)做了处理后,依然不行 ...
- 小程序嵌套h5页面_微信小程序内嵌h5页面
概况 使用 标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
- uniapp 支付(vx、zfb、app、内嵌H5)
本人在做商城项目,需要多种支付方式,在这里记录一下,小白学习,勿喷 在项目路径下创建 common文件夹(随你起什么名),新建js文件 payment.js /*** 支付相关方法*//*** 微信 ...
最新文章
- 分享一个C#使用AT指令控制语音猫的例子
- 借力大数据 物流迈向智能化
- 线程 、进程、协程 三者区别
- 093_Element.getBoundingClientRect()方法和DOMRect对象
- 视图添加字段_使用ExploreByTouchHelper辅助类为自定义视图添加虚拟视图
- 【例题+习题】【数值计算方法复习】【湘潭大学】(二)
- one-hot encoding 并非分类变量编码的唯一选择
- 初级篇第三期:初识UI
- python有趣小程序-第一个有趣的python小程序
- Linux 基本命令不能用的解决方法
- Python菜鸟之路:原生Ajax/Jquery Ajax/IFrame Ajax的选用
- 九宫格数独模型设计(随机生成题目)
- 单片机与一般微型计算机相比具有哪些特点,单片机原理与接口技术习题答案
- 【深度学习】《动手学深度学习》环境配置
- vagaa搜索服务器没响应,Vagaa(哇嘎)搜索不到资源怎么办?
- Hybird A* 算法
- 开发者头条(一):导航页
- 百度竞价有没有好的推广方法?
- 5月末跟大家讲讲webpack(生日篇)
- 测试VPS服务器脚本,一检测VPS网络速度,硬盘性能等
热门文章
- Paxos第三篇 - Paxos成员组变更
- Storm 04_Storm单机模式搭建完全分布式安装部署集群drpc
- 【jQuery】在表单提交前触发事件(数据校验/执行计算等)
- 使用V8和node轻松profile分析nodejs应用程序
- abap视图字段限制_在 Laravel 控制器中进行表单请求字段验证
- python根据表格数据生成折线图_Python交互图表可视化Bokeh:4. 折线图| 面积图
- Spring之SpringMVC(四)
- C++ string 使用详解(含C++20新特性)
- 操作系统 先来先服务算法(FCFS)、最短寻到时间优先算法(SSTF)、扫描算法(电梯算法,SCAN)、循环扫描算法(CSCAN)
- Pytest入门【1】