很久没写文章了，忙加懒实在没办法，之前也看过关于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. css2实现尖角箭头式导航

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 使用wfastcgi在IIS上部署Python Flask应用

    本文介绍了如何在Windows上部署Python Flask应用,相关环境如下: 操作系统:windows 7 Python:3.4 WFastCGI: 2.2 应用所用到的包版本如下: Flask= ...

  3. ASP.NET MVC 项目分离

    ASP.NET MVC 项目分离 说明: ZRT.Web 是前台网站,目录[D:\ZRT.Web\] ZRT.Admin 是后台管理,目录[D:\ZRT.Web\Applications\Admin\ ...

  4. Minix

    [1]  MINIX是一种基于微内核架构的类UNIX计算机操作系统,由Andrew S. Tanenbaum发明.MINIX最初发布于1987年,开放全部源代码给大学教学和研究工作.2000年重新改为 ...

  5. 转：Grunt：任务自动管理工具

    Grunt:任务自动管理工具 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:gru ...

  6. 如何使用 Android Studio 的 git hub 功能

    How to use GitHub with Android Studio This article will explain how to use GitHub with Android Studi ...

  7. 【基础】常用的机器学习&数据挖掘知识点

    Basis(基础): MSE(Mean Square Error 均方误差),LMS(LeastMean Square 最小均方),LSM(Least Square Methods 最小二乘法),ML ...

  8. wndows make images

    配置文件/etc/xen/mywindows.内容如下 import os, re arch_libdir = 'lib' arch = os.uname()[4] if os.uname()[0] ...

  9. hdu 4738 Caocao's Bridges(2013杭州网络赛丶神坑)

    就是求最小权值的桥..不过有好几个坑... 1:原图不连通,ans=0. 2: m<=n^2 显然有重边,重边必然不是桥,处理重边直接add(u, v, INF). 3:   最小桥边权为0的时 ...

  10. ViewState是什么

    在做ASP.NET的时候遇到ViewState,当时不知道他是什么意思. 就在当前页面中保存数据的. 像session.是会话级别的.只要会话没有过期.session中存的数据就在. viewstat ...