最近一直在学习 html5，为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要介绍下 html5 的本地存储。

在客户端存储数据

html5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对 session 的数据存储，一旦窗口关闭就没有了

两个方法用法完全一样，下面就以 localStorage 为例。

为什么要用本地存储

早期我们都是使用 cookie 来完成的，但是 cookie 不适合大量的数据存储，也就是说它太小，只有 4k 的样子，而且速度慢效率低。

localStorage 方法

那么我们该如何添加数据呢？很简单，就像给对象添加属性一样：

localStorage.pageLoadCount = 1;

可以通过浏览器的控制台来查看是否有存储数据：

同样读取和修改数据也很方便：

console.log(localStorage.pageLoadCount);    //读取

localStorage.pageLoadCount = 10;            //修改

console.log(localStorage.pageLoadCount);    //读取

以下是结果：

当然 localStorage 本身自带一些方法及属性，具体如下：

localStorage.clear();                       //清除所有的存储数据

localStorage.getItem('pageLoadCount');      //读取存储数据，返回值 "10"，等同于 localStorage.pageLoadCount

localStorage.key(0);                        //获取存储数据的 key，返回值 "pageLoadCount"

localStorage.length;                        //获取存储数据的长度

localStorage.removeItem('pageLoadCount');   //删除特定的存储数据

localStorage.setItem('name','Jack');        //新增加一个存储数据，等同于 localStorage.name = 'Jack';

需要注意的是：读取存储数据的时候，返回的是字符串，无论之前存的是什么，最后读取的都是字符串，所以读取的时候需要进行类型转换。

最后附上 localStorage 应用的 demo：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <title>localStorage</title>

</head>

<body>

    <p id="p"></p>

</body>

</html>

<script>

window.onload = function(){

    if(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0;

    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;

    document.getElementById('p').innerHTML = '浏览次数：' + localStorage.pageLoadCount + ' 次。';

}

</script>

参考资料：

HTML 5 Web 存储

HTML5 LocalStorage 本地存储

【html5】html5 本地存储的更多相关文章

  1. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  2. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  3. HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...

  4. 【转】HTML5 LocalStorage 本地存储

    原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...

  5. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  6. Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查

    大家好!我是范范.本人刚接触ST2到现在刚刚两个月,6月1号接的项目,那时才知道有Sencha Touch2这个东西,到现在两个月了期间的幸酸就不说了.今天说说在项目中用到的HTML5的本地存储.可能 ...

  7. HTML5 LocalStorage 本地存储总结

    存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"] ...

  8. HTML5 LocalStorage 本地存储（转）

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  9. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

  10. HTML5 LocalStorage 本地存储，刷新值还在

    H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStorage会话存储,页面关闭数据就会丢失. 使用方法: localStor ...

随机推荐

  1. DataGridView控件使用大全说明-各种常用操作与高级操作

    DataGridView控件 DataGridView是用于Windows Froms 2.0的新网格控件.它可以取代先前版本中DataGrid控件,它易于使用并高度可定制,支持很多我们的用户需要的特 ...

  2. MySQL设置从库只读模式

    常见现象 运维工作中会经常维护MySQL主从服务器,当然Slave我们只是用于读操作. 一般权限开通也只授权只读账号,但是有时候维护工作可能不是一个人在做,你不能保证其他同事都按照这个标准操作. 有同 ...

  3. Hadoop hostname: Unknown host

    本来下想在一台虚拟机上,搭建一个hadoop的测试hadoop,用于调试和阅读hadoop源代码,发现在虚拟机上执行: $hostname -i hostname: Unknown host 这个是因 ...

  4. JS location.href跳出框架打开新页面

    后面在框架中,当判断登录失效后要返回登录页面,但登录页面却在框架内打开,我想让它直接跳出框架打开,这里不是打开新窗口. echo "<script language=\"ja ...

  5. mysql定时执行某任务

    查看event是否开启: show variables like '%sche%'; 将事件计划开启: set global event_scheduler=1; 关闭事件任务: alter even ...

  6. LeetCode 326 Power of Three（3的幂）（递归、Log函数）

    翻译 给定一个整型数,写一个函数决定它是否是3的幂(翻译可能不太合适-- 跟进: 你能否够不用不论什么循环或递归来完毕. 原文 Given an integer, write a function t ...

  7. 正确安全清空在线慢查询日志slow log的流程

    查看慢查询日志的状态: mysql> show variables like '%slow%'; +---------------------+------------------------- ...

  8. MySQL 性能跟踪方法

    https://www.cnblogs.com/zhoujinyi/p/5236705.html https://dev.mysql.com/doc/refman/5.7/en/slow-query- ...

  9. VirtualBox虚拟机网络环境解析和搭建-NAT、桥接、Host-Only、Internal、端口映射

    一.NAT模式 特点: 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间不能ping通 3.虚拟机可以ping通主机(此时ping虚拟机的网关,即是ping主机) 4.主机不能ping通虚拟机 应 ...

  10. [MyBean说明书]-添加IApplicationContextEx01接口手动加载库文件

    主控台接口实现了IApplicationContextEx01接口,可以手动执行加载DLL和配置文件,具体使用方法可以参见DEMO(samples\manualLoadLib)   IApplicat ...