最近一直在学习 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. 搭建MVC及WEB API项目框架时碰到的问题集合

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  2. jquery判断选择元素是否存在

    有时候我们需要对jquery选择器选中的元素进行判断是否存在,如果存在才进行某些操作,不存在就不进行,那么如何判断元素是否存在,代码如下: //判断是否存在特定ID值的元素 ){ alert(&quo ...

  3. 令新手头疼的modelsim库编译

    估计很多人买了CB哥的书来看吧,他们在学习modelsim仿真的过程中可能遇到过明明是按照书上的步骤添加器件库的了,但还是出现如下的错误: 首先,我想说的是CB哥书上的modelsim-altera1 ...

  4. 菜鸟学SSH（八）——Hibernate对象的三种状态

    前面写了几篇关于SSH的博客,但不是Struts就是Spring,Hibernate还从来没写过呢.说好是SSH的,怎么可以光写那两个,而不写Hibernate呢对吧.今天就先说说Hibernate对 ...

  5. Redis source code analysis

    http://zhangtielei.com/posts/blog-redis-dict.html http://zhangtielei.com/assets/photos_redis/redis_d ...

  6. Shell脚本判断内容为None的方式

    1.判断变量 read -p "input a word :" word if [ ! -n "$word" ] ;then echo "you ha ...

  7. Ubuntu 14.04环境变量修改

    因在开发编译时是找不到命令,原因是将路径添加到环境变量,如何设置环境变量,搜索一下,找到以下关于环境变量设置的几个文件及何时执行. 首先要认识几个和环境变量有关的文件: /etc/profile —— ...

  8. electron 创建右键菜单

    1.引入模块 const Electron = require('electron'); const remote = Electron.remote; const Menu = remote.Men ...

  9. 扩展music-list.vue让列表前三名显示🏆奖杯

    1.在music-list.vue中写DOM <li @click="seletItem(song,index)" class="song-item" v ...

  10. pom.xml里发布和下载包

    1.下载包 在<project>标签中 <repositories> <repository> <id>nexus</id> <url ...