Html5 Web的5中離線儲存方式之localStorage

業餘草發表於2015-05-05
HTMLWeb

Html5 Web的5中離線儲存方式之localStorage

在HTML5越來越流行的今天，如果你還不知道離線儲存，那就說明你落後了很多。
HTML5的離線儲存方式有多種：Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。
Web SQL Database目前雖然還有瀏覽器支援，是唯一的關聯式資料庫結構的儲存，但W3C以及停止對其的維護和發展。我就不多說了。
今天我們主要看LocalStorage這種最簡單的本地儲存方式。

先來看一個小例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5中LocalStorage的使用</title>
</head>
<body>
    <p>
  你瀏覽當前頁面
  <span id="count">N</span>
  次.
</p>
<script>
    if (!localStorage.pageLoadCount)
        localStorage.pageLoadCount = 0;
    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
    document.getElementById('count').textContent = localStorage.pageLoadCount;
</script>
</body>
</html>

看看執行效果這裡寫圖片描述

/**
 * 儲存/更新資料
 */
function saveDm(dataModel){
    window.localStorage['DataModel'] = dataModel;
}

/**
 * 獲取資料
 */
function getDm(){  
    var value = window.localStorage['DataModel'];
    if(value){
        return value;
    }    
    return '';
}

/**
 * 刪除資料
 */
function clearDm(){
    if(window.localStorage['DataModel']){
        delete window.localStorage['DataModel'];        
    }   
}

歡迎大家關注我的部落格！如有疑問,請加QQ群：135430763共同學習！

相關文章