淺談web存儲

一、先來講說以前的客戶端存儲吧~在html5出來以前~客戶端存儲主要是使用cookie~不過這種古老的方式存在着好一些弊端~舉例以下：

能夠存儲的數據的大小受到限制~官方指出一個域名下最多能夠存儲4k的數據（有點少吧~~）

cookie的數據放到了http請求頭上~這樣不只使得http請求頭變得臃腫~過多的cookie會使請求愈來愈慢~同時還帶來了安全的問題~這玩意默認是明文的

同時注意cookie是會過時的~

二、還有一種存儲方式是userData~可是這個只有ie支持~考慮到平臺的限制~此處再也不贅述~

三、html5出來後~web存儲克服了以前cookie的缺陷~好比大小限制從原來的4k編程了5M~也有很好的跨平臺的支持~下面咱們來看下其主要的方式：

sessionStorage/localStorage：兩者的主要區別是sessionStorage存儲的數據在本次會話窗口被關閉後就沒有了~而localStorage中存儲的數據是長期存在的~除非手動刪除~同時~同一站點下的不一樣的會話窗口（注意~是同一站點~不是同域名~localStorage的數據就算是同一域名下的子域名也不能夠共享）能夠共享localStorage中存儲的數據~再者~Safari瀏覽器還支持localStorage的一個事件~叫storage事件~這個事件是當localStorage中存儲的數據發生變化時被觸發的~利用這個事件~同一站點下的不一樣窗口中localStorage的數據就能夠實現無刷新的同步啦~好比我打開兩個京東的頁面~在第一個頁面把商品加入購物車~第二個頁面無需刷新~購物扯中的數據就會自動更新~無奈~這麼棒的功能目前只有Safar支持~~還有一點須要注意的是這個事件雖然在losalStorage中提出~但這個事件的擁有着是window對象~只要頁面添加了這個事件~window會自動在localStorage中存儲的數據發生變化時觸發同一站點的窗口~而不是同一站點的會話窗口會被忽略~

應用：使用localStorage實現圖片的存儲方法：

js代碼：

function saveImg() {
            var myImg = document.createElement("img");
            myImg.src = "http://127.0.0.1/x.jpg";

            //當圖片加載完成的時候觸發回調函數
            myImg.addEventListener("load", function () {
                var imgCanvas = document.createElement("canvas"),
                imgContext = imgCanvas.getContext("2d");
                // 確保canvas元素的大小和圖片尺寸一致
                imgCanvas.width = this.width;
                imgCanvas.height = this.height;

                // 渲染圖片到canvas中
                imgContext.drawImage(this, 0, 0, this.width, this.height);

                // 用data url的形式取出
                var imgAsDataURL = imgCanvas.toDataURL("image/png");

                // 保存到本地存儲中
                try {
                    localStorage.setItem("elephant", imgAsDataURL);
                }
                catch (e) {
                    console.log("Storage failed: " + e);
                }
            }, false);
        }

        function getImg() {
            var imgData = localStorage.getItem("elephant");
            var imgObj = document.createElement("img");
            imgObj.src = imgData;
            document.body.appendChild(imgObj);
        }

注意：由於本地存儲只能存儲字符串~因此這裏使用了canvas來對圖片數據作一個轉換~可是canvas有一個安全策略~當請求的的圖片和當前的頁面不是同一個域名時會報錯~因此這裏我使用xampp搭建了一個服務器~把圖片和測試頁面都丟進去~以此來測試頁面的運行~

另外注意一下~使用localStorage前強烈建議先判斷當前瀏覽器是否支持~網上指出的一個通用的方法是if(window.localStorage)~可是這裏建議使用一種更爲健全的方式：即便用上面的方式~直接localStorage.setItem一下~並把這句放到try-catch塊中去執行~若是捕獲到異常~就說明當前的瀏覽器不支持localStorage~那麼咱們直接就換別的方法來作這個存儲啦

 

下面談談localStorage的缺陷~一個是它沒有過時這麼個說法~只要不手動刪除~那數據將會永久保存~若是業務中涉及到數據保存須要設置期限~那咱們能夠本身封裝相應的數據對象到localStorage中來實現~下面是一個實現帶過時效果的localStorage的demo

function saveDataWithDate(key, value) {
            var currentTime = new Date().getTime();
            try    {
                localStorage.setItem(key, JSON.stringify({data: value,time: currentTime}));
            }catch(e) {
                console.log("Storage failed: " + e);
            }
        }

        function getDataWithDate(key, lastTime) {
            //lastTime爲期限
            var data = localStorage.getItem(key);
            var dataObj = JSON.parse(data);
            console.log(dataObj.time);
            if(new Date().getTime() - dataObj.time > lastTime) {
                console.log("數據已過時");
            }else {
                console.log("data is:" + dataObj.data);
            }
        }