很久没写文章了，忙加懒实在没办法，之前也看过关于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. C# 控件包

    http://www.cnblogs.com/Keep-Silence-/archive/2013/01/22/2871694.html

  2. C语言２

    函数是C语言的基本单位,类是java,c#,c++的基本单位 int abs(int x); double fabs(double x);   按变量的存储方式:静态变量.自动变量.寄存器变量 指针就 ...

  3. 《Pointers On C》读书笔记(第一章 快速上手)

    1．C语言是一种自由格式的程序设计语言,没有规则要求我们必须如何书写语句.然而,如果我们在编写程序时能够遵守一些约定还是非常值得的,它可以使代码更加容易阅读和修改.另外,预处理命令有较为严格的规则. ...

  4. CCNA实验(6) -- VLAN & SPT

    交换机的作用主要有两个:1.维护CAM(ContextAddress Memory)表,该表是MAC地址和交换机端口的映射表2.根据CAM进行数据帧的转发 交换机对数据帧的处理有三种:1.Forwar ...

  5. BZOJ 1177 [Apio2009]Oil（递推）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1177 [题目大意] 给出一个矩阵,从中选出3个k*k且不相交的矩阵,使得其总和最大 [ ...

  6. C# ADO基础(使用using操作数据库）

    1.使用using 来对数据库进行操作,using是资源释放的一种缩写,用于实现了实现了IDisposable接口(释放对象资源的接口是IDisposable) private void button ...

  7. Yii2简单纪要

    网上经常拿Yii来类比ROR,从MVC角度,使用体验及代码风格上确实有很多相似的地方.不过看配置文件发现Yii2不止是受rails的影响,同样有不少spring的影子,最明显的就是配置文件中很多IOC ...

  8. linux之多进程fork:进程通信

    ++++++++++++++++++信号机制+++++++++++++++++++ 接收信号 int signal(int sig,__sighandler_t handler); int func( ...

  9. java面试核心基础（1）

    1.以下代码的执行结果 String s1 = "helloworld"; String s2 = "hello" + new Stirng("wor ...

  10. docker基础入门之二

    一.docker文件系统: linuxFS包括boot file system 和 root file system boot file system (bootfs),包含bootloader和ke ...