Html5 Web的5中离线存储方式之localStorage

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共同学习!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值