本地存储 cookie,session,localstorage( 一)基本概念及原生API
http://www.w3school.com.cn/html5/html_5_webstorage.asp
http://adamed.iteye.com/blog/1698740
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
localStorage生命周期是永久,除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
localStorage 存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。
这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
同源的判断规则:
http://www.test.com
https://www.test.com (不同源,因为协议不同)
http://my.test.com(不同源,因为主机名不同)
http://www.test.com:8080(不同源,因为端口不同)
localStorage和sessionStorage使用时使用相同的API:
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
<script type="text/javascript"> localStorage.lastname="Smith";
</script>
下面的例子对用户访问页面的次数进行计数:
<script type="text/javascript"> if (localStorage.pagecount
) { localStorage.pagecount=Number(localStorage.pagecount
) +1; } else { localStorage.pagecount
=1; } </script>
枚举localStorage的方法:
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
删除localStorage中存储信息的方法:
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。
例如:
localStorage.key = {value1:"value1"};
localStorage.key.value1='a';
这里是无法对实际存储的值产生作用的,下面的写法也不可以:
localStorage.getItem("key").value1="a";
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
<script type="text/javascript">
sessionStorage.lastname="Smith";
</script>
var arrDisplay = [0, 1, 1, 1];
//存储,IE6~7 cookie 其他浏览器HTML5本地存储
if (window.localStorage) {
localStorage.setItem("menuTitle", arrDisplay);
} else {
Cookie.write("menuTitle", arrDisplay);
}
数据读取
var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");
需要注意的是:虽然我们存储的是数组,但是,实际上存储的的是数组字符化后的字符串(Cookie
和localStorage
都是),因此,我们在处理strStoreDate
的时候,一定要当作字符串处理,类似下面:
strStoreDate.split(",").each(function(display, index) {
//根据存储的display触发相对应的动作
});
本地存储 cookie,session,localstorage( 一)基本概念及原生API的更多相关文章
- 本地存储 cookie,session,localstorage( 二)angular-local-storage
原文:https://github.com/grevory/angular-local-storage#api-documentation Get Started (1)Bower: $ bower ...
- jquery访问浏览器本地存储cookie,localStorage和sessionStorage
前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...
- 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享) 1. 离线缓存(xxx.manifest) H5处理离线缓存还是存在一些硬伤的,所以真实项 ...
- 本地存储sessionStorage 、 localStorage 、cookie整理
sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...
- H5新特性 本地存储---cookie localStorage sessionStorage
本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...
- cookie和localstorage sessionStorage的概念、区别、使用场景
本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...
- 浏览器存储(cookie、localStorage、sessionStorage)
互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器.这样用户登录.购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳 ...
- cookie session localstorage sessionStorage区别
cookie:http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html 重要特点: 1.cookie 有大小设置,有过期时间设 ...
- 地理位置(navigation.geolocation)与本地存储(seessionStorage、localStorage)
一.地理位置( geolocation ): navigator.geolocation对象: 1.单次请求: //navigator.geolocation.getCurrentPosition( ...
随机推荐
- nginx 502 Bad Gateway 错误问题收集
nginx 502 Bad Gateway 错误问题收集 (2010-11-18 13:51:37) 转载▼ 标签: 杂谈 分类: 工作 nginx 502 Bad Gateway 错误问题收集 因为 ...
- QC邮件转发工具Mail Direct安装配置手册
QC邮件转发工具Mail Direct安装配置手册 2010-06-11 10:00:56| 分类: 软件测试 | 标签: |举报 |字号大中小 订阅 QC邮件转发工具安装配置手册 由于公司没有独立的 ...
- oracle读写文件--利用utl_file包对磁盘文件的读写操作
oracle读写文件--利用utl_file包对磁盘文件的读写操作 摘要: 用户提出一个需求,即ORACLE中的一个表存储了照片信息,字段类型为BLOB,要求能导出成文件形式. 本想写个C#程序来做, ...
- SQL Server 2014 新特性:IO资源调控
谈谈我的微软特约稿:<SQL Server 2014 新特性:IO资源调控> 2014-07-01 10:19 by 听风吹雨, 570 阅读, 16 评论, 收藏, 收藏 一.本文所涉及 ...
- JavaScript实例技巧精选(11)—计算器实例3
>>点击这里下载完整html源码<< 界面如下 将以下代码插入<body></body>中 <FORM NAME="Calc" ...
- Windows窗口的创建
Windows窗口创建的基本代码: #include <Windows.h> LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); i ...
- Hadoop 使用FileSystem API 读取数据
代码: package com.hadoop; import java.io.IOException; import java.io.InputStream; import java.net.URI; ...
- Moq & RhinoMocks
Moq & RhinoMocks 使用Mock对象进行测试一般都会有以下三个关键步骤: 使用接口来描述需要测试的对象 为实际的产品代码实现这个接口 以测试为目的,在Mock对象中实现这个接口 ...
- Mysql--选择适合的引擎,提高操作速度
在MySQL 5.1中,MySQL AB引入了新的插件式存储引擎体系结构,允许将存储引擎加载到正在运新的MySQL服务器中 一.数据引擎简介 在MySQL 5.1中,MySQL AB引入了新的插件 ...
- C#线程池用法
C#线程池用法 在C#编程语言中,使用线程池可以并行地处理工作,当强制线程和更新进度条时,会使用内建架构的ThreadPool类,为批处理使用多核结构,这里我们来看在C#编程语言中一些关于来自Syst ...