# 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](http://zhidao.baidu.com/link?url=yMKHEn0Q0lk1Mt1V8NPKThdZKAtugobZjZksHH2yPLYtGpByk4Vf1Q7L1SstZoGGMT98Jx1K47qviU-kxMhM2q) ### 美文美圖 ?