很久没写文章了，忙加懒实在没办法，之前也看过关于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. 《Pointers On C》读书笔记(第四章 语句)

    1．空语句只包含一个分号,它本身并不执行任何任务,其适用的场合是语法要求出现一条完整的语句,但并不需要它执行任何任务. 2．C语言中并不存在专门的“赋值语句”,赋值就是一种操作,在表达式内进行.通过在 ...

  2. QListWidget的QComboBox下拉列表添加复选框及消息处理

    要在QComboBox下拉列表项中添加复选框,并进行消息处理,在网上搜索了很久没有找到太多有用的信息和实际的例子,但从中还是找到了一些提示性的资料,根据这些简短的介绍,最终实现了这个功能. QComb ...

  3. CFBundleName系列参数的含义

    顺带讲一下其他这些选项表示什么意思: CFBundleName: CFBundleName指定了该束的简称.简称应该小于16个字符并且适合在菜单和“关于”中显示.通过把它加入到适当的.lproj子文件 ...

  4. android studio 实现代码混淆

    =======本文章属于转载==========原文章地址:http://my.oschina.net/aibenben/blog/370985 这篇文章等是跟大家分享一在Android studio ...

  5. css包含块containing block

    <css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...

  6. php 前端获取数据

    <pre name="code" class="python"><!doctype html> <html lang=" ...

  7. Codeforces 430B Balls Game（Two Pointers）

    [题目链接] http://codeforces.com/contest/430/problem/B [题目大意] 祖玛游戏,给出一个序列,表示祖玛球的颜色序列,三个或者以上的球碰在一起就会发生消除, ...

  8. Codeforces Round#344

    A题意思是,给出两个数列,求一个区间,使第一个数列的区间或和第二个数列的区间或的和最大,输出最大和 很显然,或运算会使得答案越运算越大.所以,直接全部或起来,相加就是答案. = =打cf的时候自动脑补 ...

  9. Extjs4 类的定义和扩展

    一般定义方式,注意方法和函数的添加方式不同.(添加函数只能用override方式添加不知为什么,有知道的,请搞之.) 定义一个类,并给他一个方法 1: Ext.define('Simple.Class ...

  10. 如何写出专业级OOP程序-----文档注释

    由于时间的限制就写一些通用的注释啦> @author 姓名 这个标记将产生一个作者条目,可以使用多个@author注释,每个对应一个作者. @version 文本 这个标记产生版本条目,对当前版 ...