最近一直在学习 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. Maven：浅析依赖（dependency）关系中 scope 的含义(转)

    在 Pom4 中,dependency 元素中引入了 scope 元素,这是一个很重要的属性.在Maven 项目中 Jar 包冲突.类型转换异常的很大原因是由于 scope 元素使用不当造成的. sc ...

  2. mysql 中 delete 子查询的限制

    1 DELETE FROM tablename 中的 tablename 不能起别名 delete ; [Err] - You have an error in your SQL syntax; 2 ...

  3. django -- while time zone support is active

    一.先看报错: django 在处理datetime类型的的报错/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site ...

  4. kafka 监控（eagle）

    topic:创建时topic名称 partition:分区编号 offset:表示该parition已经消费了多少条message logSize:表示该partition已经写了多少条message ...

  5. UITableView/UIScrollView 不能响应TouchBegin 的处理 及窥见 hitTest:withEvent：

    重写touchBegin 方法是不行的,在UITableView/UIScrollView 解决方案 重写hitTest:withEvent:  在他们的子类中 - (UIView *)hitTest ...

  6. Android 3.0开始引入fragments（碎片、片段）类

    Fragment要点 Fragment作为Activity界面的一部分组成出现. 可以在一个Activity中同时出现多个Fragment,并且,一个Fragment亦可在多个Activity中使用. ...

  7. 【Android开发】Android Host详解（翻译自官方文档）

    原文:http://android.eoe.cn/topic/summary 文档内容 API概述 Android中manifest文件需求 工作的设备 * 发现设备 * 获得和设备进行“交流”的权限 ...

  8. IOS UIView自动调整尺寸

    自动尺寸调整行为 当您改变视图的边框矩形时,其内嵌子视图的位置和尺寸往往也需要改变,以适应原始视图的新尺寸.如果视图的autoresizesSubviews属性声明被设置为YES,则其子视图会根据au ...

  9. Android AOP之路三 Android上的注解

    一.简单介绍 啥是注解.不懂的能够先看我上一篇文章. 在android 里面 注解主要用来干这么几件事: 和编译器一起给你一些提示警告信息. 配合一些ide 能够更加方便快捷 安全有效的编写java代 ...

  10. React 设计思想

    https://github.com/react-guide/react-basic React 设计思想 译者序:本文是 React 核心开发者.有 React API 终结者之称的 Sebasti ...