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

美文美圖

再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智慧的隊伍中來！https://www.cnblogs.com/captainbed