(转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html
HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage Posted on 2012-03-25 11:23 祥叔 阅读(2650) 评论(0) 编辑 收藏
HTML5 提供了四种在客户端存储数据的新方法,即 localStorage 、sessionStorage、globalStorage、Web Sql Database。 本文先介绍前面三个,这三个相对比较简单,理解和操作都比较容易,下一节重点介绍Web Sql Database :
一,localStorage :
localStorage 没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。也就是说,localStorage是永远不会过期的,除非主动删除数据。数据可跨越多个窗口,无视当前会话,被共同访问、使用。有点像AspNet 应用程序中的全局变量Application。
二,sessionStorage :
顾名思义它就如同AspNet中的Session。 针对一个 session 的数据存储,任何一个页面存储的信息在窗口中同一网站的任何页面都可以访问它存储的数据。每个窗口的值都是独立的,它的数据会因窗口的关闭而丢失,不同窗口间的sessionStorage是不可以共享的。
localStorage /sessionStorage都有相同的Api 如
localStorage.length 获得storage中的个数
localStorage .key(n) 获得storage中第n个键值对的键
localStorage.key = value
localStorage.setItem(key, value) 添加
localStorage.getItem(key)获取
localStorage.removeItem(key) 移除
localStorage.clear() 清除
从上面的Api可以看出,他们其实就是键/值对,就是字典,就是JSON。既然可以看作是json ,那么对他们的操作就可以有如下方式:
如:localStorage.name="徐明祥" ;//添加
localStorage["name"]="徐明祥" ; //添加
alert(localStorage.name);//获取
alert(localStorage["name"]);//获取
三,globalStorage:
在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,和sessionStorage一样,域中任何一个页面存储的信息都能被所有的页面共享。目前只有FF支持,且只支持当前域下的globalStorage存储。
基本用法:
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
globalStorage[''] —— 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。
方法属性:
setItem(key, value) —— 设置或重置 key 值。
getItem(key) —— 获取 key 值。
removeItem(key) —— 删除 key 值。
设置 key 值:window.globalStorage["planabc.net"].key = value;
获取 key 值:value = window.globalStorage["planabc.net"].key;
四,Web Sql DataBase
欲知详情请看下一回:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416418.html
原文地址:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html
(转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage的更多相关文章
- H5新特性 本地存储---cookie localStorage sessionStorage
本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...
- 本地存储cookie,localStorage,sessionStorage
常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...
- html5本地存储(localStorage)使用介绍
1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...
- (转)HTML5开发学习(3):本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- html5开发学习 html5自学需要怎么学
记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...
- store.js - 轻松实现本地存储(LocalStorage)
store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...
- web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
随机推荐
- 移动端的touch事件处理
简要的探讨一下移动端 touch 事件处理几个坑,以及相应的简单处理方法. click 穿透 假设有个弹出层,上面有个关闭的按钮支持 touchend 触发后关闭,若正好下方有个元素支持 click ...
- 5.6 WebDriver API实例讲解(31-35)
31.判断页面元素是否存在 public static void testElementExist(){ driver.get("http://www.sogou.com"); t ...
- 在ArcMap 10.3中创建和编辑数据
在ArcMap 10.3中创建和编辑数据 .......待补充 新建 创建一个新文件((Points, Polylines, and Polygons/点.线.多边形)
- IO流--字节流
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileInputStream; import ...
- iOS开发几年了,你清楚OC中的这些东西么!!!?
iOS开发几年了,你清楚OC中的这些东西么!!!? 前言 几年前笔者是使用Objective-C进行iOS开发, 不过在两年前Apple发布swift的时候,就开始了swift的学习, 在swift1 ...
- 各种浏览器hack
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
- 转载:Clear Float
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...
- C#入门篇6-5:字符串操作 测试StringBuilder的运行效率
//测试StringBuilder的运行效率 public static void Fun2() { #region string string str = "我喜欢编程!"; / ...
- redhat enterprixe 5.0 NFS服务配置与管理
一.了解NFS Samba 是主要用于实现Linux和Windows操作系统之间文件共享的协议,而NFS则是实现UNIX和Linux操作系统之间文件共享的协议. NFS可以把网络上远程的文件挂载到本机 ...
- office 使用技巧
Excel: 非打印区域显示成灰色:视图--分页预览 选定行的时侯,如何从某一行选定到末尾? 先点某一行,然后按住shift不松,再按END,再按下方向箭. 选定列也是这样,先按住某列,然后按SHIF ...