(转)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 ...
随机推荐
- 【转】 STL中的set容器的一点总结
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...
- robotframework笔记10
循环和条件 for循环 *** Settings *** Library BuiltIn Library Collections *** Test Cases *** TestCase01 My Ke ...
- 《javascript高级程序设计》 第25章 新兴的API
25.1 requestAnimationFrame() 25.1.1 早期动画循环 25.1.2 循环间隔的问题 25.1.3 mozRequestAnimation-Frame.webkitReq ...
- MATLAB随机森林回归模型
MATLAB随机森林回归模型: 调用matlab自带的TreeBagger.m T=textread('E:\datasets-orreview\discretized-regression\10bi ...
- 开源软件架构总结之——Bash(readline做输入交互式,词法语法分析,进程交互)
第3章 The Bourne-Again Shell Bash的主要组件:输入处理,解析,单词展开(word expansion)和其他命令处理,管道(pipeline)中的命令执行.这些组件构成一个 ...
- 在现有 SharePoint 服务器上安装 PowerPivot for SharePoint
步骤1: 检查 SQL Server 2008 R2 Analysis Services 实例的“程序”文件夹.如果您找到了现有安装或之前安装的证据,则执行剩余步骤.否则,直接执行步骤 2:安装 Po ...
- 使用BroadcastReceiver实现开机自动运行的Service
为了让Service随应用系统启动自动运行,可以让BroadcastReceiver监听Action为ACTION_BOOT_COMPLETED常量的Intent,然后在BroadcastReceiv ...
- BroadcastReceiver的简介
BroadcastReceiver本质上属于一个监听器,因此实现BroadcastReceiver的方法只要重写BroadcastReceiver的onReceive(Context context ...
- Android调用远程Service的参数和返回值都需要实现Parcelable接口
import android.os.Parcel;import android.os.Parcelable; public class Person implements Parcelable{ pr ...
- Windows API调用外部程序
要在应用程序中启动其他的应用程序,有3个函数可以使用,下面我一一说说他们(我以打开D:\Program Files\zeecalls\目录下的zeecalls.exe应用程序为例): 1.Winexe ...