HTML5之WEB Storage
什么是HTML5 web storage?
使用HTML5,web页面能够使用用户的浏览器本地保存数据。
在曾经,通常我们使用cookie来保存用户数据。然而使用web存储更加安全和高速。数据不再包括在每个server请求中。仅仅存在你须要的时候。
同一时候我们也能够保存大量数据。而不影响站点的性能。
数据都保存成key/value形式,一个web页面仅仅能够訪问自己的数据。
浏览器支持
IE8+。Firefox,Chrome,Opera和Safari 5都支持这个特性。
注意IE7和更早版本号不支持这个特性。
localStorage和sessionStorage
这里有俩个新的用来保存数据的属性:
- localStorage - 没有过期时间的方式保存数据
- sessionStorage - 保存数据到session
在使用web storage之前,检查浏览器是否支持localStorage和sessionStorage:
- if(typeof(Storage)!=="undefined"){
- // Yes! localStorage and sessionStorage support!
- // Some code.....
- }else{
- // Sorry! No web storage support..
- }
localStorage Object
localStorage对象保存数据没有过期时间的问题。
数据在浏览器关闭后不会删除,并且一直有效。
- localStorage.lastname="Smith";
- document.getElementById("result").innerHTML="Last name: "
- + localStorage.lastname;
在线演示
代码说明:
- 创建了一个localStorage 键值对,使用key="lastname"。 value="Smith" 。
- 得到lastname相应的值,并且赋予id=result的元素
小技巧:键值对会以字符串方式存储。记住在必要的时候将他们转为其它格式
以下的样例计算了一个用户点击按钮的次数。
在这段代码中,将会把值转化为数字,这样能够使用加法:
- if (localStorage.clickcount){
- localStorage.clickcount=Number(localStorage.clickcount)+1;
- }else{
- localStorage.clickcount=1;
- }
- document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
在线演示
sessionStorage对象
sessionStorage对象和localStorage对象相似,除了保存的数据仅仅在当前session中有效。数据将会在用户关闭浏览器窗体时失效。
以下代码在当前的session中计算了用户点击的次数:
- if (sessionStorage.clickcount){
- sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
- }else{
- sessionStorage.clickcount=1;
- }
- document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
HTML5之WEB Storage的更多相关文章
- Html5的学习之旅-Html5的web Storage概述(16)
在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题: 大小:Cooki ...
- [Selenium] Android HTML5 中 Web Storage
在 HTML5 中,Web Storage 这个新特性可让用户将数据存储在本地的浏览器中.在早期的浏览器中可通过 cookies 来完成这个任务,但 Web Storage 会更加安全和高效,且 We ...
- HTML5存储 ——Web Storage(localStorage 和 sessionStorage)
一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...
- HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
- HTML5 高级系列:web Storage
前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...
- HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...
- H5本地储存Web Storage
一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
- 解析H5本地储存Web Storage
一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
随机推荐
- tomcat能启动正常,但是输入localhost:8080不能登录
怎么配置JDK和TOMCAT应该百度经验已经很好地解释了. tomcat启动成功了,但是 localhost:8080 登录不成功. 有一种可能,缺少http:// 输入: http://loca ...
- PBOC联机交易中ARQC及ARPC的计算
金融IC卡在申请联机交易时,终端会进行发卡行认证,验证卡片的合法性,终端通过GAC得到卡片返回的ARQC,与终端自身产生的ARQC进行比较,如果一致,则说明是由发卡行发行的合法卡片,同时对ARQC及认 ...
- struts2中,OGNL访问值栈的时候查找的顺序是什么?请排序:模型对象、临时对象、固定名称的对象、Action对象
struts2中,OGNL访问值栈的时候查找的顺序是什么?请排序:模型对象.临时对象.固定名称的对象.Action对象 解答:struts2的值栈排列顺序为:1).临时对象:2).模型对象:3).Ac ...
- 酷狗缓存文件kgtemp的加密方式
[转自:http://www.cnblogs.com/KMBlog/p/6877752.html] 首先对比了一下缓存文件和下载好的mp3文件,发现缓存文件多了1024个字节,而且对比了几个缓存文件, ...
- 模式识别之Shape Context---利用Shape Context进行形状识别
什么是Shape Context Shape Context是一个用于形状识别的,非常经典的特征(一串便于计算机处理的数字)提取方法,它由Serge Belongie和Jitendra Malik ...
- Android基站定位
Android基站定位 一.通过手机信号获取基站信息 通过TelephonyManager 获取lac:mcc:mnc:cell-id(基站信息)的解释: MCC.Mobile Country C ...
- 进度条在.net导入Excel时的应用实例
这篇文章主要介绍了进度条在.net导入Excel时的应用,以实例形式讲述了.net导入Excel时根据页面情况显示进度条的实现方法,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了进度条在.ne ...
- UE对话框
// Put your "OnButtonClicked" stuff here FText DialogText = FText::Format( LOCTEXT("P ...
- 0、手把手教React Native实战之开山篇
##作者简介 东方耀 Android开发 RN技术 facebook github android ios 原生开发 react reactjs nodejs 前端 ...
- iOS UIModalPresentationFormSheet风格下的键盘隐藏
1. 在UIModalPresentationFormSheet(iPad device, without a UINavigationController)下的视图中,如果使用 [inputView ...