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

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

html5 web storage的浏览器支持判断

要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){
alert("浏览支持localStorage") 
}else{alert("浏览暂不支持localStorage") } 
//或者 
if(typeof window.localStorage == 'undefined')
{alert("浏览暂不支持localStorage") }

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存储value

http://hovertree.com/menu/html5/

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:sessionStorage.setItem("key", "value");     localStorage.setItem("site", "xiao");

getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:var value = sessionStorage.getItem("key");     var site = localStorage.getItem("site");

removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:sessionStorage.removeItem("key");     localStorage.removeItem("site");

clear清除所有的key/value

用途:清除所有的key/value
用法:.clear()
代码示例:sessionStorage.clear();     localStorage.clear();

其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);

推荐:http://www.cnblogs.com/roucheng/p/texiao.html

HTML 5 Web 存储的更多相关文章

  1. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

  2. 临时存存储页面上的数据---Web存储

    HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...

  3. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  4. 【html5】Web存储_locaStorage对象的应用

    Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...

  5. 【高级功能】使用Web存储

    Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS: ...

  6. 【温故而知新-Javascript】使用Web存储

    Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS: ...

  7. Web存储(Web Storage)的浏览器支持情况

    所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  10. Web存储(Web Storage)介绍

    Web存储即在客户端存储数据. 在没有Web Storage之前,是通过cookie来在客户端存储数据的.但是由于 浏览器能存cookie数比较少.如IE8,Firefox,opera每个域可以保存的 ...

随机推荐

  1. Golang下的Log处理

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 后端系统中的Log是相当重要的,做过高并发服务的同学都会认同这一点.相对而言,调试已经用处不大了,对于这样的项目, ...

  2. bianma 水平 技巧

    能够写出这样的代码, 其实体现了水平 switch (state) { case 0: break; case 3: return; // already connected case 4: stat ...

  3. 老学员的学习感悟 --prince2认证有什么用

    2007年一月,我加入了荷兰Irdeto(中国)有限公司.刚入公司,我就结识了PRINCE2(受控环境下的项目管理),才知道prince2是英国政府在政府项目中使用的项目管理标准.这一标准早已在欧洲广 ...

  4. Atitit dsl exer v3 qb3 新特性

    Atitit dsl exer v3 qb3 新特性 /atiplat_cms/src/com/attilax/dsl/DslParser.java V3 支持typeed参数,与简化的notyp参数 ...

  5. Atitit ACID解决方案2PC(两阶段提交)  跨越多个数据库实例的ACID保证

    Atitit ACID解决方案2PC(两阶段提交)  跨越多个数据库实例的ACID保证 1.1. ACID解决方案1 1.2. 数据库厂商在很久以前就认识到数据库分区的必要性,并引入了一种称为2PC( ...

  6. jQuery_01之选择器

    1.jQuery对象获取:①先获得DOM对象,再用$函数封装到jQuery对象:var $jQuery=$(DOM对象):②直接使用$函数查找到的DOM对象,被自动封装到jQuery对象中:var $ ...

  7. python中paramiko模块的使用

    paramiko是python一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接1.可以远程操作服务器文件 例如: df:查看磁盘使用情况 mkdir:创建目录 mv/cp/mk ...

  8. 注意HTML的语言编码charset

    注意HTML的语言编码的重要性 目录 charset编码重要性 charset在html什么地方 charset标签 编码种类 charset utf-8介绍 charset GB2312介绍 推荐网 ...

  9. python单线程爬虫code

    广度优先算法: # -*- coding: utf-8 -*- import urllib import urllib.request from bs4 import BeautifulSoup im ...

  10. 前端学PHP之基础语法

    × 目录 [1]代码标识 [2]注释 [3]输出 [4]计算表达式 [5]大小写 [6]空白符 前面的话 PHP是一种创建动态交互性站点的强有力的服务器端脚本语言.PHP能够包含文本.HTML.CSS ...