很久没写文章了，忙加懒实在没办法，之前也看过关于Web Storage的文章，当时就觉得各各浏览器的支持跟上来还早着呢，像我们这样做门户网站的一时半会儿也用不上，毕竟用户群体鱼目混杂嘛，最近各各浏览器频频升级，尤其IE转眼间从ie6、ie7跑到ie11了。

Web Storage呢就跟session和cookie一样的啦，不过session和cookie大家都知道，今天要说说Web Storage。

Web Storage也有分两类sessionStorage和localStorage，这两个差别就跟session和cookie一样，sessionStorage关闭浏览器后过期，localStrage不会过期，但是跟cookie不一样的是没有过期时间。

对比session和cookie的优点主要提现在一下三点：

1、容量大，IE8里是10M，不同浏览器支持大小不一致。

2、不会随着回话来传输。

3、读取和写入方便，有现成的sessionStorage.setItem(key,value),sessionStorage.getItem(key),localStorage.setItem(key,value),localStorage.getItem(key)方法。

Web Storage在各各浏览器中的支持情况：

Web Storage使用实例代码：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>HTML5 Web Storage Demo</title>

<script type="text/javascript">

function $(id){ return document.getElementById(id);}

function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);}

function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}

function savelocalStorage(id){localStorage.setItem("message",$(id).value);}

function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}

</script>

</head>

<body>

<div>

<h2>sessionStorage Demo</h2>

<p id="sessionMsg"></p>

<input type="text" id="sessionInput" />

<input type="button" value="保存数据" onclick="savesessionStorage('sessionInput');" />

<input type="button" value="读取数据" onclick="loadsessionStorage('sessionMsg');" />

<br />

<h2>localStorage Demo</h2>

<p id="localMsg"></p>

<input type="text" id="localInput" />

<input type="button" value="保存数据" onclick="savelocalStorage('localInput');" />

<input type="button" value="读取数据" onclick="loadlocalStorage('localMsg');" />

</div>

</body>

</html>

Web Storage使用实例代码运行效果：

HTML5 Web Storage使用实例的更多相关文章

  1. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  2. HTML5 Web Storage 特性

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

  3. HTML5 Web Storage -- 让Cookies看起来如此古老

    转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...

  4. HTML5 Web Storage概述

    Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...

  5. html5 Web Storage（localStorage()，sessionStorage()）

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  6. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  7. HTML5本地存储 Web Storage

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

  8. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

  9. Web Storage中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

随机推荐

  1. 四轴飞行器1.5 各种PID对比分析及选择

    原创文章,欢迎转载,转载请注明出处 这篇文章主要介绍我对PID的理解,以及选择PID算法的过程. 一 PID的理解和学习过程 二 飞控的PID效果 先上个飞控PID的响应的视频:介绍在后面 地址:ht ...

  2. Github Blog 搭建手册

    http://www.ilehao.com/blog/2012/11/11/github-blog-config/ http://www.freebuf.com/articles/web/25613. ...

  3. SSD的来由与优势

           SSD,对于很多人来说,它现在已不再是个很陌生的名词,有些网友谐趣的把它称作“湿湿的”,这里既有谐音的意味,也有称赞SSD意思.虽然大家对SSD已不算陌生,但恐怕对SSD的历史也所知不多 ...

  4. API各函数作用简介

    API各函数作用简介 1.控件与消息函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小 AnyPopup 判断屏幕上是否存在任何弹出式窗口 ArrangeI ...

  5. delphi ICS控件示例解读

    {* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Author: Fran鏾is PIETTE ...

  6. 自定义View编译失败。Binary XML file line #255: Error inflating

    02-28 15:17:16.281: DEBUG/AndroidRuntime(391): Shutting down VM 02-28 15:17:16.281: WARN/dalvikvm(39 ...

  7. 物理DG主备库切换时遇到ORA-16139: media recovery required错误

    在物理DG主备库切换时遇到ORA-16139: media recovery required错误 SQL> ALTER DATABASE COMMIT TO SWITCHOVER TO PRI ...

  8. 基于 dbms_redefinition 在线重定义表

    Oracle 支持在线重定义表,也就是说我们可以在修改表结构(DDL)的同时进行相关的DQL.DML操作,使得前端的DML根本感觉不到表结构实际上已经发生了变化,对于用户而言是完全透明的.当然在线重定 ...

  9. loadRunner 11.0 安装及破解

    http://jingyan.baidu.com/article/20095761b31b58cb0621b463.html 破解时必须是管理员账户登录.

  10. C# 委托和方法

    委托是一种特殊的引用类型,它将方法也作为特殊的对象封装起来,从而将方法作为变量或参数进行传递 using System; using System.Collections.Generic; using ...