HTML5 Web Storage使用实例
很久没写文章了，忙加懒实在没办法，之前也看过关于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使用实例的更多相关文章
- HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
- HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...
- HTML5 Web Storage -- 让Cookies看起来如此古老
转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...
- HTML5 Web Storage概述
Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...
- html5 Web Storage（localStorage()，sessionStorage()）
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
- HTML5 WEB Storage - localStorage存储位置在哪
localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...
- HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
- HTML5之WEB Storage
什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...
- Web Storage中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
随机推荐
- poj 3469 Dual Core CPU 最小割
题目链接 好裸的题....... 两个cpu分别作为源点和汇点, 每个cpu向元件连边, 权值为题目所给的两个值, 如果两个元件之间有关系, 就在这两个元件之间连边, 权值为消耗,这里的边应该是双向边 ...
- 随机数、continue、break
arc4random() — 返回一个随机数(无符号整型). 如果要随机一个 [a, b]范围内的整数 公式:arc4random() % (b - a + 1) + a; #include &l ...
- 关于Android Launcher图标上面动态改变数字的实现
由于项目需要使用到类似小米应用商店的图标数字提示功能,谷歌百度了许多文章都没看到有真正意义上的实现(没有在国外网站上搜索),有实现在APP内部的一个ImageView上面更新数字的,当然这种太简单无非 ...
- Qt程序打包成exe可执行文件图文教程（图文并茂，且用到了filepack）
很多Qt爱好者想发布自己的Qt软件,但却发现在其他没有安装Qt SDK的机器上无法运行,这就是本文想要说明的问题.现在网上大部分软件都要发布自己开发的应用程序,都会打包到exe文件中,待安装完exe文 ...
- 11136-Hoax or what
Each Mal-Wart supermarket has prepared a promotion scheme run by the following rules: A client who w ...
- hdoj 5319 Painter(模拟题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5319 思路分析:假设颜色R表示为1,颜色B表示为2,颜色G表示为3,因为数据量较小,采用暴力解法即可, ...
- Extjs4 类的定义和扩展
一般定义方式,注意方法和函数的添加方式不同.(添加函数只能用override方式添加不知为什么,有知道的,请搞之.) 定义一个类,并给他一个方法 1: Ext.define('Simple.Class ...
- SqlDataAdapter的方法之一Fill (DataSet dataset, String datatable)解释
一.SqlDataAdapter的方法之一Fill (DataSet dataset, String datatable)解释:根据datatable名填充Dataset.myda.Fill(ds, ...
- 文件上传功能 -- jquery.form.js/springmvc
距离上一篇 文件上传下载样式 -- bootstrap(http://www.cnblogs.com/thomascui/p/5370947.html)已经三周时间了,期间一直考虑怎么样给大家提交一篇 ...
- 文件上传下载样式 --- bootstrap
在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框 ...