瀏覽器本地存儲，localStorage

本文轉載自查看原文 2017-04-27 14:17 1243 web前端

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

猜您在找 localStorage基於瀏覽器的本地存儲 jquery訪問瀏覽器本地存儲cookie，localStorage和sessionStorage 瀏覽器存儲(cookie、localStorage、sessionStorage) 本地瀏覽器緩存sessionStorage（臨時存儲） localStorage（長期存儲）的使用移動端瀏覽器隱私模式/無痕模式使用本地存儲localStorage/sessionStorage的問題瀏覽器之本地緩存存儲 localStorage 和 sessionStorage的區別以及用法瀏覽器的本地存儲淺談瀏覽器存儲（cookie、localStorage、sessionStorage） h5新增瀏覽器本地緩存localStorage localStorage應用（寫的時間緩存在本地瀏覽器）