AngularJS (29) Local Storage Based on AngularJS project development skills

AngularJS (29) Local Storage Based on AngularJS project development skills
AngularJS project development skills-localStorage

After the project is developed, the test phase finds that there is a problem with the QR code generation at the backend management end. The problem lies in the storage of localStorage. As shown on the left, the generated QR code contains information shown on the left, and the actual QR code is shown on the right:

After testing, we found that the last result was actually stored in the QR code. Familiar ~ Bingo encountered this problem when highlighting the navigation bar by himself. It was the localStorage used at that time. The problem lies in localStorage. However, during storage: localStorage. setItem (key, value). If the key exists, the value is updated. The root cause of the problem is that the value is not updated after the value is set. This statement is not correct either. After refreshing, the value of value does change. However, the timing of the change is incorrect.

Looking back at the previous QR code generation, we suddenly found that the original QR code generated using localStorage is not correct. It must be improved. Through Chrome debugging, I still saw some problems. Obviously, the QR code was generated earlier than the Order details. As shown in:

Test statement for generating QR code:

Varaw.parent.doc ument. getElementById ("sunny ");

Console. log (":");

Console. log ();

Controller:

Document. getElementById ("sunny"). innerHTML = medInfo;

In this way, the data can be obtained correctly, and the problem is basically solved.

Varaw.parent.doc ument. getElementById ("sunny ");

Console. log (":");

Console. log ();

Varqrcode = newQRCode (document. getElementById ("qrcode "),{

Width: 200, // set the width and height of the QR code to 96

Height: 200

});

Qrcode. makeCode (a); // generate the QR code

The preceding statement generates the correct QR code.

Cruel reality

Reality is always so cruel. The generated QR code is incorrect. The content is blank!

When you look back, you have to continue using localStorage, but it always saves the last value. Because the two-dimensional code page is loaded earlier than the parent page, the value of localStorage is always lagging.

It has been confirmed that localStorage. removeItem ('billinfo '); does work. Tangle!

Tangle and tangle ....

Since the Sub-page is loaded earlier, you can solve the problem by delaying page loading. The following code implements delayed execution of the sub-PAGE method. The result is highlighted! Yes. I admire myself in TTM! Not easy!

 

<Script> // some function windows can be called when the page is loaded. onload = function () {setTimeout (function () {var billInfo = localStorage. getItem ('billinfo'); console. log ("billInfo:"); console. log (billInfo); var a = parent.doc ument. getElementById ("sunny"); console. log ("a:"); console. log (a); var qrcode = new QRCode (document. getElementById ("qrcode"), {width: 200, // set the width and height of the QR code 96 height: 200}); qrcode. makeCode (billInfo); // generate the content of the QR code localStorage. removeItem ('billinfo'); // qrcode. makeCode ("http: // 192.168.1.105: 8088/lmapp/billInformation.html") ;}, 0.5*1000); // executed in 0.5 seconds}; </script>

 

Images and truth

Summary

In fact, the solution to the above problems only bypasses localStorage, and does not substantially solve the problem of localStorage storage. The root cause will be solved later. The execution sequence of the Child page and parent page scripts should be performed earlier. If the child page needs to use the value in the parent page, the script code of the Child page needs to be delayed.

References

Http://zhidao.baidu.com/link? Url = yMKHEn0Q0lk1Mt1V8NPKThdZKAtugobZjZksHH2yPLYtGpByk4Vf1Q7L1SstZoGGMT98Jx1K47qviU-kxMhM2q

Meiwenmeitu