什么是HTML5 web storage?

使用HTML5,web页面能够使用用户的浏览器本地保存数据。

在曾经,通常我们使用cookie来保存用户数据。然而使用web存储更加安全和高速。数据不再包括在每个server请求中。仅仅存在你须要的时候。

同一时候我们也能够保存大量数据。而不影响站点的性能。

数据都保存成key/value形式,一个web页面仅仅能够訪问自己的数据。

浏览器支持

IE8+。Firefox,Chrome,Opera和Safari 5都支持这个特性。

注意IE7和更早版本号不支持这个特性。

localStorage和sessionStorage

这里有俩个新的用来保存数据的属性:

  • localStorage - 没有过期时间的方式保存数据 
  • sessionStorage - 保存数据到session

在使用web storage之前,检查浏览器是否支持localStorage和sessionStorage:


  1. if(typeof(Storage)!=="undefined"){
  2. // Yes! localStorage and sessionStorage support!
  3. // Some code.....
  4. }else{
  5. // Sorry! No web storage support..
  6. }

localStorage Object

localStorage对象保存数据没有过期时间的问题。

数据在浏览器关闭后不会删除,并且一直有效。


  1. localStorage.lastname="Smith";
  2. document.getElementById("result").innerHTML="Last name: "
  3. + localStorage.lastname;

在线演示

代码说明:

  • 创建了一个localStorage 键值对,使用key="lastname"。 value="Smith" 。
  • 得到lastname相应的值,并且赋予id=result的元素

小技巧:键值对会以字符串方式存储。记住在必要的时候将他们转为其它格式

以下的样例计算了一个用户点击按钮的次数。

在这段代码中,将会把值转化为数字,这样能够使用加法:


  1. if (localStorage.clickcount){
  2. localStorage.clickcount=Number(localStorage.clickcount)+1;
  3. }else{
  4. localStorage.clickcount=1;
  5. }
  6. document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

在线演示

sessionStorage对象

sessionStorage对象和localStorage对象相似,除了保存的数据仅仅在当前session中有效。数据将会在用户关闭浏览器窗体时失效。

以下代码在当前的session中计算了用户点击的次数:


  1. if (sessionStorage.clickcount){
  2. sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  3. }else{
  4. sessionStorage.clickcount=1;
  5. }
  6. document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

HTML5之WEB Storage的更多相关文章

  1. Html5的学习之旅-Html5的web Storage概述(16)

    在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题: 大小:Cooki ...

  2. [Selenium] Android HTML5 中 Web Storage

    在 HTML5 中,Web Storage 这个新特性可让用户将数据存储在本地的浏览器中.在早期的浏览器中可通过 cookies 来完成这个任务,但 Web Storage 会更加安全和高效,且 We ...

  3. HTML5存储 ——Web Storage(localStorage 和 sessionStorage)

    一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...

  4. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  5. HTML5 高级系列:web Storage

    前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...

  6. HTML5 Web Storage 特性

    原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...

  7. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  8. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  9. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

随机推荐

  1. tomcat能启动正常,但是输入localhost:8080不能登录

    怎么配置JDK和TOMCAT应该百度经验已经很好地解释了. tomcat启动成功了,但是  localhost:8080  登录不成功. 有一种可能,缺少http:// 输入: http://loca ...

  2. PBOC联机交易中ARQC及ARPC的计算

    金融IC卡在申请联机交易时,终端会进行发卡行认证,验证卡片的合法性,终端通过GAC得到卡片返回的ARQC,与终端自身产生的ARQC进行比较,如果一致,则说明是由发卡行发行的合法卡片,同时对ARQC及认 ...

  3. struts2中,OGNL访问值栈的时候查找的顺序是什么?请排序:模型对象、临时对象、固定名称的对象、Action对象

    struts2中,OGNL访问值栈的时候查找的顺序是什么?请排序:模型对象.临时对象.固定名称的对象.Action对象 解答:struts2的值栈排列顺序为:1).临时对象:2).模型对象:3).Ac ...

  4. 酷狗缓存文件kgtemp的加密方式

    [转自:http://www.cnblogs.com/KMBlog/p/6877752.html] 首先对比了一下缓存文件和下载好的mp3文件,发现缓存文件多了1024个字节,而且对比了几个缓存文件, ...

  5. 模式识别之Shape Context---利用Shape Context进行形状识别

     什么是Shape Context Shape Context是一个用于形状识别的,非常经典的特征(一串便于计算机处理的数字)提取方法,它由Serge Belongie和Jitendra Malik  ...

  6. Android基站定位

    Android基站定位   一.通过手机信号获取基站信息 通过TelephonyManager 获取lac:mcc:mnc:cell-id(基站信息)的解释: MCC.Mobile Country C ...

  7. 进度条在.net导入Excel时的应用实例

    这篇文章主要介绍了进度条在.net导入Excel时的应用,以实例形式讲述了.net导入Excel时根据页面情况显示进度条的实现方法,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了进度条在.ne ...

  8. UE对话框

    // Put your "OnButtonClicked" stuff here FText DialogText = FText::Format( LOCTEXT("P ...

  9. 0、手把手教React Native实战之开山篇

    ##作者简介 东方耀    Android开发   RN技术   facebook   github     android ios  原生开发   react reactjs nodejs 前端   ...

  10. iOS UIModalPresentationFormSheet风格下的键盘隐藏

    1. 在UIModalPresentationFormSheet(iPad device, without a UINavigationController)下的视图中,如果使用 [inputView ...