瀏覽器本地存儲,localStorage


  一般不會用到這個瀏覽器的本地存儲,項目中的數據一般都會存在后台的數據庫中,需要時,則由前台進行請求獲取。不過有些情況下不得不使用這個 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();

  會全部清除哦,謹慎使用~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM