首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。

  if(window.localstorage){

  alert('this brower supports localstorage');

}else{

  alert('this brower not supports localstorage)

}

  存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

  localStorage.setItem("a","isaac");//设置a的值为"isaac"

  var a = localStorage.getItem("a");//获取a的值

  localStorage.removeItem("a");//清除a的值

  最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

  var  storage = window.localStorage;

  function showStorage(){

  for(var i = 0;i<storage.length;i++){

  //key(i)获得相应的键,再用getItem获得相应的键值    

  document.write(storage.key(i)+":"+storage.getItem(storage.key(i))+"<br>")

  }

}

  需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。

  另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。

HTML5 LocalStorage 本地存储原理详解的更多相关文章

  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 本地存储(转)

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

  4. 【转】HTML5 LocalStorage 本地存储

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

  5. HTML5 LocalStorage 本地存储总结

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

  6. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  7. HTML5 LocalStorage 本地存储,刷新值还在

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

  8. HTML5 LocalStorage 本地存储的用法

    本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...

  9. 前端数据存储方案集合(cookie localStorage等)以及详解 (二)

    前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...

随机推荐

  1. 二、oracle数据库成功安装步骤 配置监听器

      Oracle数据库使用监听器来接收客户端的连接请求,要使客户端能连接Oracle数据库,必须配置监听程序. 在安装Oracle数据库时,如果选择的是"创建和配置数据库",则安装 ...

  2. 【转】SQL Server中的事务与锁

    SQL Server中的事务与锁   了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂 ...

  3. php 下载文件代码段

    /** * 下载 * @param [type] $url [description] * @param string $filename [description] * @return [type] ...

  4. OpenCV Haartraining

    opencv_haartraining.exe -data xml -vec pos.vec -bg neg/neg.txt -w 20 -h 20 -mem 144 opencv_haartrain ...

  5. 添加系统右键菜单项 管理员取得所有权(W)(带盾牌)

    @color 0A @title 添加系统右键菜单项 管理员取得所有权(^&W)(带盾牌) by wjshan0808 @echo off echo * >nul reg add HKC ...

  6. 使用hbuilder编辑器实现移动app打包

    作为一枚web前端来讲,需要了解的东西太多,需要学习的也太多了,那天因为公司需求,就研究了下移动网站打包成app的方法,这种东西好像是H5出来后就有推出的,因为性功能不行,就没怎么关注,但现在移动互联 ...

  7. Centos下安装nginx rpm包

    1 在nginx官方网站下载一个rpm包,下载地址是:http://nginx.org/en/download.html wget http://nginx.org/packages/centos/6 ...

  8. C++之路进阶codevs1269(匈牙利游戏)

    1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond       题目描述 Description ...

  9. DataRow映射实体

    public static T ConvertToModel<T>(DataRow dr) where T : new() { T t = new T(); Type modelType ...

  10. XEN的启动信息输出到“Platform timer is 14.318MHz HPET”就暂停接收的解决办法

    使用Serial Over Lan(SOL)来双机调试 XEN,在 XEN 启动时,引导信息输出到以下这一句时,就不再发送调试信息了: ...(XEN) Intel machine check rep ...