AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储
绪
项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStorage的存储。如下图左所示,二维码生成完毕包含信息如下图左所示,实际二维码信息如下图右所示:
经过测试发现二维码实际存储的是上一次的结果。好熟悉~Bingo,自己做导航栏高亮时就遇到过这个问题,当时就是使用的localStorage。问题还是出在localStorage身上。但是存储时:localStorage.setItem(key,value),如果key存在,则更新value。问题的根源正是设置好值之后,value没有更新。这个说法也不对,刷新之后,value的值确实变了。只不过变的时机不对。
回过头来看看之前二维码的生成,猛然发现原来之前使用localStorage生成的二维码也是不对的。必须得加以改进。通过Chrome调试,自己还是看出了一些问题,很明显,二维码生成早于获取订单详情信息。如下图所示:
二维码生成端测试语句:
var a = parent.document.getElementById("sunny");
console.log("a:");
console.log(a);
控制器:
document.getElementById("sunny").innerHTML = medInfo;
既然这样可以正确获取到数据,问题基本上就得到了解决。
var a = parent.document.getElementById("sunny");
console.log("a:");
console.log(a);
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 200, // 设置二维码宽高96
height : 200
});
qrcode.makeCode(a); // 生成二维码内容
以上语句便可生成正确的二维码信息。
残酷的现实
现实总是那么的残酷。生成的二维码不对,内容为空!
回过头来还得继续使用localStorage,但其保存的总是上一次的值,因为二维码页面加载早于父页面,导致localStorage的值总是滞后。
经过证实localStorage.removeItem('billInfo');确实起作用了。好纠结啊!
纠结纠结....
既然子页面加载较早,自己就想是不是可以通过延迟页面加载的方法解决。以下代码实现了子页面方法的延迟执行,结果亮了!可以了,我TTM佩服自己了!不容易啊!
<script> // 当页面加载的时候可以调用某些函数 window.onload = function(){ setTimeout(function(){ var billInfo = localStorage.getItem('billInfo'); console.log("billInfo:"); console.log(billInfo); var a = parent.document.getElementById("sunny"); console.log("a:"); console.log(a); var qrcode = new QRCode(document.getElementById("qrcode"), { width : 200, // 设置二维码宽高96 height : 200 }); qrcode.makeCode(billInfo); // 生成二维码内容 localStorage.removeItem('billInfo'); // qrcode.makeCode("http://192.168.1.105:8088/lmapp/billInformation.html"); },0.5*1000);//0.5秒后执行 }; </script>
有图有真相
总结
其实以上问题的解决只是绕过了localStorage,而没有实质性的解决localStorage存储问题。本质原因后期进行解决。有关子页面与父页面脚本执行先后顺序,应该是子页面较早执行,若子页面需要利用父页面中的值,则子页面脚本代码需要延迟执行。
参考文献
美文美图
AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储的更多相关文章
- Java进阶(二十六)公司项目开发知识点回顾
公司项目开发知识点回顾 前言 "拿来主义"在某些时候并不是最佳选择,尤其是当自己遇到问题的时候,毫无头绪. 在一次实验过程中,需要实现数据库的CRUD操作.由于之前项目开发过程中, ...
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
- AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定
AngularJS与单选框及多选框的双向动态绑定 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...
- mysql进阶(二十九)常用函数
mysql进阶(二十九)常用函数 一.数学函数 ABS(x) 返回x的绝对值 BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x) 返回大于x的最小整数值 EXP ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- AngularJS进阶(二十二)实现时间选择插件
JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...
- AngularJS进阶(二十六)实现分页操作
JS实现分页操作 前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果.在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果.受前面"JS实现时间选择插件 ...
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...
随机推荐
- MySQL 数学函数
MySQL 数学函数 所有的数学函数在发生错误的情况下,均返回 NULL. -元减.改变参数的符号 mysql> SELECT - 2; -> -2 注意,如果这个操作符被用于一个 BIG ...
- dokcer自动化构建部署java web 基于jenkins+maven+nuxus容器
# dokcer自动化构建部署java web 基于jenkins+maven+nuxus容器 #环境centos 7.4 docker 18.03.0-ce # nuxus,创建maven本地源(可 ...
- 让你的代码量减少3倍!使用kotlin开发Android(三) 缩短五倍的Java Bean
回顾一下 哈,没想到你已经坚持不懈看到第三篇了,不错哈~坚持就是胜利. 本文同步自博主的私人博客wing的地方酒馆 在上一篇文章中,我们介绍了扩展函数,这里对上一篇进行一点小小的补充. 还记得text ...
- 第一个Angular2的样例
欢迎跟我一起学习Angular2 本文根据angular2官网手动敲码得来: 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 - 开发环境搭建 - 配 ...
- XCode使用技巧
XCode使用技巧 自动生成get.set方法 @property 用法 #import <Foundation/Foundation.h> @interface People : NSO ...
- Chrome 内存和CPU消耗量双料冠军
今天统计了下某个时刻各进程的内存和CPU使用概况.结果发现,Chrome消耗量真是不一般的大.比Windows主进程都还猛! 另外发现百度安全卫士占用CPU也比较猛. powershell下输入: p ...
- Scheme call/cc 研究
目前尚不清楚实质,但已经能够从形式上理解它的某些好处,有个很简单的连乘函数可以说明: 为了展示究竟发生了什么,我包装了下乘法函数,将其变为mul. 我们将比较product和xproduct的区别. ...
- 11 吐司 Toast 代码案例
package com.qf.day11_toast_demo05; import android.app.Activity; import android.graphics.Color; impor ...
- UNIX环境高级编程——单实例的守护进程
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <signal.h&g ...
- [openwrt] uci 的shell和lua接口
uci是openwrt上配置操作的接口,不管是自动化的shell脚本,还是使用luci来二次开发配置界面,都会用到这部分知识. uci提供了lua, shell, c接口,这里主要用到了前两种 she ...