很久没写文章了，忙加懒实在没办法，之前也看过关于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. 通过class实例取得类的接口，父类，构造器

    interface China {     public static final String NATIONAL = "JAPAN";     public static fin ...

  2. 对discuz的代码分析学习（一）目录结构

    主目录 DISCUZ用的是自己的框架,和其他框架应用一样属于单入口应用.主目录下的.php文件,大部分是应用的入口文件. home.php:家园入口,即论坛中类似博客的那个东西.index.php:首 ...

  3. 用python 10min手写一个简易的实时内存监控系统

    简易的内存监控系统 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 文章github源地址,还可以看到具体的代码,喜欢请在原链接右上角加个star 腾讯视频链接 ...

  4. 每天一个小算法（4）----在O(1)时间删除指定结点

    O(1)时间内删除结点的思路只能是复制该结点下一个结点的数据,然后删除该结点的下一个结点,来等效删除此结点. 需要注意的地方是删除头结点和尾结点的处理. #include <stdio.h> ...

  5. ubuntu中查找软件的安装位置

    ubuntu中的软件可通过图形界面的软件中心安装,也可以通过命令行apt-get install安装.但是安装后的软件在哪个位置呢?这点跟windows环境下安装软件的路径选择不一样.ubuntu中可 ...

  6. java 线程学习

    转载:详见处http://lavasoft.blog.51cto.com/62575/27069   Java多线程编程总结   下面是Java线程系列博文的一个编目:   Java线程:概念与原理 ...

  7. qemu/kvm/qemu-kvm/virsh的区别

    转自:http://www.2cto.com/os/201305/209596.html qemu/kvm/qemu-kvm/virsh的区别   qemu是一套虚拟机管理系统,kqemu是qemu的 ...

  8. perl lwp get uft-8和gbk

    gbk编码: jrhmpt01:/root/lwp# cat x2.pl use LWP::UserAgent; use DBI; $user="root"; $passwd='R ...

  9. 用auto_ptr类模板帮助动态内存管理

    动态内存使用最多的是在C++应用程序的代码中.有过编程经验的程序员虽然都知道new操作符的使用一定要与delete匹配,在某些场合仍然可能有内存溢出.当异常被掷出时,程序的正常控制流程被改变,因此导致 ...

  10. 使用jQuery创建模态窗口登陆效果

    日期:2013-8-22  来源:GBin1.com 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表 ...