数据存储之Web存储(sessionStorage localStorage globalStorage )
Web Storage 两个目标
提供一种在cookie之外的存储会话守数据的途径
提供一种存储大量可以跨会话存在的数据机制
最初的Web Storage规范包含两个对象
sessionStorage 和 globalStorage
都以window的属性存在
IE8+ chrome4+
Storage 类型
提供了最大的存储空间(因浏览器而异)来存储名值对
方法
clear() 删除所有值 Firefox中没有实现
getItem(key) 根据指定的名字key获取对应的值
key(index) 获取index位置的 key(值的名字)
removeItem(key) 删除由key指定的名值对
setItem(key,value) 为指定的那么设置一个对应的值
sessionStorage 对象
sessionStorage 对象存储特定于某个会话的数据 也就是说数据只保持到浏览器关闭(cookie未设置实效时间性质一样)
写入数据方面
Firefox WebKit 同步写入 立即提交
IE 异步写入
只使用于IE8 可以强制把数据写入磁盘 对于大数据量 可能要考虑这种事务形式的方法
sessionStorage.begin() //begin方法是为了确保在这段代码执行的时候不发生其他磁盘写入操作
sessionStorage.name='lxk';
sessionStorage.age='16';
sessionStorage.commit();//调用commit方法之后立刻被写入磁盘
方法
有length属性
读取
sessionStorage.getItem(key)
sessionStorage.key
删除
delete sessionStorage.key 在webkit中无效
sessionStorage.removeItem(key)
迭代
for(var key in sessionStorage){
console.log(key + "=" + sessionStorage.getItem(key))
}
for(var i = 0, len = sessionStorage.length; i < len; i++){
var key = sessionStorage.length.key[i];
var value = sessionStorage.getItem(key);
console.log(key + "=" + value)
}
globalStorage 对象
Firefox2中实现了此对象
需要设置哪些域可以访问
使用方法
globalStorage[".wrox.com"].name = "lxk";//对于所有的子域都可以访问
var name = globalStorage[".wrox.com"].name
对globalStorage访问是依据发起的请求页面的域名 协议 和端口来限制的 类似同源策略
https 和 http (:80和:8080) (a.wrox.com 和 b.wrox.com)下设置都不能互相访问
域名使用location.host 靠谱一点
如果不使用removeItem 或者 delete 删除 或者 浏览器清理缓存 存储的数据一直保留在磁盘上
localStorage 对象
不同于 globalStorage localStorage规则定好了,如果想访问到localStorage对象,页面必须来自
同一域名 同一协议 同一端口
方法同上
如果不使用removeItem 或者 delete 删除 或者 浏览器清理缓存 存储的数据一直保留在磁盘上
Storage 事件
对Storage对象进行的任何修改都会在文档上触发Storage事件 例如 setItem delete removeItem clear
属性
domain 发生变化的存储空间域名
key 设置或删除的键
newValue 设置值 是新值 删除值 为null
oldValue 键被更改之前的值
例子 chrome不支持
document.addEventListener("storage", function(event){
cosnole.log(event.domain)
}, false)
限制
存储空间的限制 来自每个源 (协议 域 端口)
localStorage 大部分 5M chrome 和 safari 对每个源 限制是 2M ios safari 和 android webkit 2.5M
注意:
Storage类型只能存储字符串 非字符串数据在存储之前会被转换成字符串
sessionStorage localStroage globalStorage 都是Stroage的实例
例子
var obj = {name: "lxk"};
sessionStorage.setItem("info", obj);//应该用JSON.stringify(obj)做一个序列化和反序列化
sessionStorage.getItem("info") --> "[object Object]"
sessionStorage对象主要针对会话的小段数据存储 如果需要跨越会话存储数据 global和localStorage更为适合
cookie 默认情况 和 sessionStorage 一样会在会话结束 消失
数据存储之Web存储(sessionStorage localStorage globalStorage )的更多相关文章
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...
- 客户端本地存储,web存储,localStorage
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- 浏览器 Web Storage - sessionStorage & localStorage
storage事件 当储存的数据发生变化时,会触发storage事件.我们可以指定这个事件的回调函数. window.addEventListener("storage",onSt ...
- 【html5】Web存储_locaStorage对象的应用
Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...
- Web存储使用详解(本地存储、会话存储)
Web存储使用详解(本地存储.会话存储)1,Web存储介绍HTML5的Web存储功能是让网页在用户计算机上保存一些信息.Web存储又分为两种:(1)本地存储,对应 localStorage 对象.用于 ...
- HTML5: HTML5 Web 存储
ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...
- HTML5(七)Web 存储
HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 ...
- (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...
- web存储机制(localStorage和sessionStorage)
web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...
随机推荐
- JQuery编写简易京东购物车功能
前天无意间看到有一位程序员的博客,有一篇名为无聊时编写的购物车,看了之后,只是觉得很垃圾,因为代码很臃肿,当然我写的也不咋地,当然我也是复 习一下所学的js,再敲这个的期间遇到了如下问题,1:子元素父 ...
- [Spark內核] 第41课:Checkpoint彻底解密:Checkpoint的运行原理和源码实现彻底详解
本课主题 Checkpoint 运行原理图 Checkpoint 源码解析 引言 Checkpoint 到底是什么和需要用 Checkpoint 解决什么问题: Spark 在生产环境下经常会面临 T ...
- BCB F12切换界面 显示异常
亲们,我偶遇了一个小怪兽F12切换界面,效果如下: 还没有解决办法:
- [TLSR8266] 1、搭建tlsr8266编译框架在win服务器中
前言 泰凌微TLSR8266蓝牙芯片的开发环境在win桌面系统中搭建起来比较简单,在其论坛SDK版块->Telink IDE中可以找到安装包,直接安装即可生成基于Eclipse的开发环境,及相关 ...
- \(?0\d{2}[) -]?\d{8}正则表达式的解释
正则表达式30分钟出现了这样一个正则表达式:(?0\d{2}[) -]?\d{8} "("和")"也是元字符,所以需要转义. ?匹配零或一次 (? 表示 出现( ...
- Linux系统下安装jdbc与tomcat
一.下载Linux版本的jdbc与tomcat 1.1 下载Linux版本的jdbc: 1.1.1 1.1.2 1.1.3 在进行1.1.3操作之前得先勾选我同意协议 1.1.4 下载完成 1.2下载 ...
- python科学计算之numpy
1.np.logspace(start,stop,num): 函数表示的意思是;在(start,stop)间生成等比数列num个 eg: import numpy as np print np.log ...
- Django----->inclusion_tag的使用
一种比较普遍的tag类型是只是渲染其它模块显示下内容,这样的类型叫做Inclusion Tag. 常用的模板标签是通过渲染 其他 模板显示数据的. 比如说,Django的后台管理界面,它使用了自定义的 ...
- Redis 学习开发笔记
Redis特点: 1.速度快 2.支持丰富的数据类型:字符串.哈希列表.集合 3.操作具有原子性,所有Redis操作都是原子操作 4.多实用工具,可应用如缓存,消息队列,应用程序中任何短期数据,如we ...
- Java Socket获取本机的InetAddress实例
package com.immooc;/* * InetAddress类 */import java.net.InetAddress;import java.net.UnknownHostExcept ...