一般不會用到這個瀏覽器的本地存儲,項目中的數據一般都會存在后台的數據庫中,需要時,則由前台進行請求獲取。不過有些情況下不得不使用這個 localStorage 來做保存操作。比如繪制的圖像數據,請求后台返回數據進行繪制,這時需要將之前請求的繪制圖片數據進行保留,以便方便對比,而將之前請求繪制的圖片數據放入數據庫中保存很不方便,而且頻繁切換或者數據量大時,會造成性能問題,這樣是不合要求的,那怎么解決此類問題呢?想到了利用瀏覽器本地存儲的方式,只要不清除歷史記錄,本地歷史會一直保存,這樣就會很方便的通過 api 來獲取想要的數據,大大簡化了與后台數據請求的此數,減少了其工作量等。
這里記錄下操作的相關 api,常用的幾個異常簡單,可以把瀏覽器存儲當成是一個巨大的對象來使用,不過由瀏覽器要求,記着是 IE9 以上,其他瀏覽器貌似都是支持的。
<!DOCTYPE html> <html > <head> <meta charset='utf-8'> </head> <body > <script language="JavaScript"> console.log(localStorage.a) if(window.localStorage){ alert(1) localStorage.a = 3 var b = localStorage.a console.log(b); }else{ alert(0) } console.log(localStorage.localObj); var obj = {name: 'ice'} localStorage.localObj = JSON.stringify(obj); console.log(localStorage.localObj); localStorage.clear(); console.log(localStorage.localObj); </script> </body> </html>
首先需要判斷存不存在本地存儲,再使用。
然后就是類似對象的調用一樣,直接存儲使用即可。
有的時候數據很多,建議先將數據轉成 json 串,再進行存儲,因為對象或數組,它有字節限制,超出后的部分會被丟棄,所以轉成 json 完全無問題,獲取的時候還需要反轉成對象或數組哦別忘了!
還有個清除所有存儲的 api :localStorage.clear();
會全部清除哦,謹慎使用~