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存储问题。本质原因后期进行解决。有关子页面与父页面脚本执行先后顺序,应该是子页面较早执行,若子页面需要利用父页面中的值,则子页面脚本代码需要延迟执行。

参考文献

http://zhidao.baidu.com/link?url=yMKHEn0Q0lk1Mt1V8NPKThdZKAtugobZjZksHH2yPLYtGpByk4Vf1Q7L1SstZoGGMT98Jx1K47qviU-kxMhM2q

美文美图

AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储的更多相关文章

  1. Java进阶(二十六)公司项目开发知识点回顾

    公司项目开发知识点回顾 前言 "拿来主义"在某些时候并不是最佳选择,尤其是当自己遇到问题的时候,毫无头绪. 在一次实验过程中,需要实现数据库的CRUD操作.由于之前项目开发过程中, ...

  2. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  3. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

  4. mysql进阶(二十九)常用函数

    mysql进阶(二十九)常用函数 一.数学函数 ABS(x) 返回x的绝对值 BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x) 返回大于x的最小整数值 EXP ...

  5. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  6. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  7. AngularJS进阶(二十二)实现时间选择插件

    JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...

  8. AngularJS进阶(二十六)实现分页操作

    JS实现分页操作 前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果.在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果.受前面"JS实现时间选择插件 ...

  9. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

随机推荐

  1. zabbix API基本使用方法介绍

    前言: 以下内容根据zabbix 3.2官方文档总结:https://www.zabbix.com/documentation/3.2/manual/api 此文档只是简单的介绍API的基本使用,关于 ...

  2. Node.js 加密

    稳定性: 2 - 不稳定; 正在讨论未来版本的 API 改进,会尽量减少重大变化.详见后文. 使用 require('crypto') 来访问这个模块. 加密模块提供了 HTTP 或 HTTPS 连接 ...

  3. PHP 包含

    PHP 包含文件 PHP include 和 require 语句 在 PHP 中,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容. include 和 require 语句用于在执 ...

  4. 更新git源以便安装最新版本

    sudo add-apt-repository ppa:git-core/ppa sudo apt-get update

  5. [BBS]搭建开源论坛之JForum富文本编辑器更换

    本文作者:sushengmiyan  本文地址:http://blog.csdn.net/sushengmiyan/article/details/47866905 上一节我们将开发环境搭建完成,我们 ...

  6. Redis之(一)初识Redis

    1.Redis概述 我们知道,内存是电脑主板上的存储部件,用于存储当前正在使用的数据和程序,CPU可以与内存直接沟通,所以访问速速非常高:而外存数据必须加载到内存以后程序才能使用.如果把CPU当做一个 ...

  7. 设子数组A[0:k]和A[k+1:N-1]已排好序(0≤K≤N-1)。试设计一个合并这2个子数组为排好序的数组A[0:N-1]的算法。

    设子数组A[0:k]和A[k+1:N-1]已排好序(0≤K≤N-1).试设计一个合并这2个子数组为排好序的数组A[0:N-1]的算法.要求算法在最坏情况下所用的计算时间为O(N),只用到O(1)的辅助 ...

  8. JAVA面向对象-----extends关键字

    继承使用extends关键字实现 1:发现学生是人,工人是人.显然属于is a 的关系,is a就是继承. 2:谁继承谁? 学生继承人,发现学生里的成员变量,姓名和年龄,人里边也都进行了定义.有重 复 ...

  9. 查看apk签名信息

    经常在注册开发者的时候会遇到要求填写申请应用的应用签名: 有两种很方便的方法: 1.如果没有源码或者没有打开eclipse,直接下载这个应用应用下载链接 使用截图,只要把包名输入,自动会出现签名信息. ...

  10. EPnP算法

    EPnP算法 相机坐标系用\(F^c\),世界坐标系用\(F^w\)表示,任何一点可以用四个控制点\(p_i^w\)表示 \begin{equation} p_i^w=\sum_{j=1}^4\alp ...