(转)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 ...
随机推荐
- golang为LigerUI编写简易版本web服务器
package main import ( "io/ioutil" "log" "net/http" "os" ) va ...
- mysql5.7主从复制
1.简介 1.1主从复制 是指建立一个和主数据库完全一样的数据库环境,称为从数据库:主数据库一般是实时的业务数据库,从数据库的作用和使用场合一般有几个: 一是作为后备数据库,主数据库服务器故障后,可切 ...
- 关于Android代码混淆知识点
现在有反编译技术,容易得到源码,所以要混淆代码,加大反编译难度. 只需要在 build.grade 的配置文件中配置就可以了. proguardFiles getDefaultProguardFile ...
- node环境下处理get post
前言:今天刚学get,post.这里只是几下今天的理解.so文章只供新手参考. 编译器是webstorm 搭建后服务器后(具体请查看上篇文章) 在routes文件夹下的index.js文件中写入 如图 ...
- console的一个小易错点
以前用控制台都是 console.log("a"); 每次log的都是一个变量或直接的字符串, 但是今天我在log里面写了个表达式, 下面再写各个表达式的时候,发现他莫名奇妙的输出 ...
- [redis] redis 存取键值对常用的三种使用方式 - Jedis、JedisPool、Jedis分布式
|-Jedis 普通方式 |-JedisPool 连接池方式(需要引入pool相关jar) |-Jedis 分布式 (需要引入pool相关jar) 引入jedis2.7.0和commons.pool2 ...
- uva-----11292 The Dragon of Loowater
Problem C: The Dragon of Loowater Once upon a time, in the Kingdom of Loowater, a minor nuisance tur ...
- Symmetric Tree [LeetCode]
Problem description: http://oj.leetcode.com/problems/symmetric-tree/ Basic idea: Both recursive and ...
- 张艾迪Eidyzhang:解码天才Eidyzhang的诞生
AOA解码:天才Eidyzhang的诞生AOA深度解读:世界第一天才Eidyzhang: (TheWorldNo.1Girl+TheWorldNo.1InterentGirl+世界第一女孩+世界第一互 ...
- Java 集合系列 10 Hashtable详细介绍(源码解析)和使用示例
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...