localstorage使用不嚴謹之坑

今天上線新版本後，發現極個別“老”用戶在微信瀏覽器中無法打開我們網站的首頁。在經過一番線上文件代理替
換後，終於發現了問題所在。

問題代碼段：

if(localstorage.getItem("things")){
    var things = localstorage.getItem("things");

    use(things);

    //緩存用一次就刪除
    localstorage.removeItem('things');
}else{
    use(newData);
}

這段代碼乍一看沒什麼問題，但是有隱患。在老版本中，localstorage中存的things內容如下：

{
    name:'px',
    age:'25'
}

但是到了新版本，由於需求問題，這個緩存的值改變了，變成了如下結構：

{
    username:'px',
    myage:'25'
}

這樣就導致了在使用use函數處理things的時候報錯了，導致後面的removeItem永遠不執行，所以緩存
的這段數據在代碼中永遠不被清除，use函數一直使用舊的數據進行渲染，這樣就一直報錯，永遠無法使用新
數據。

這裏有兩點需要改進的
* 給緩存加版本號
* 用變量讀取緩存後，立刻清除緩存

優化後的代碼如下：

//先判斷緩存版本號
if(localstorage.getItem("version") == curVersion){
    if(localstorage.getItem("things")){

        var things = localstorage.getItem("things");
        //立刻清除
        localstorage.removeItem('things');

        use(things);
    }else{
        use(newData);
    }
}else{
    localstorage.removeItem('things');
    use(newData);
}

原文出處：http://www.foreverpx.cn