HTML5 本地存储(localStorage)、会话存储(sessionStorage)和 Cookie 的区分
来源:互联网 发布:女装淘宝店铺排名 编辑:程序博客网 时间:2024/05/29 19:52
一、本地存储 和 会话存储
本地存储(localStorage):长时间的保存在电脑本地,不同页面之间都能互相读取本地存储的数据。
会话存储(sessionStorage):只限于当前页面,当前页面关闭,数据就清除了。
注意:不管是 localStorage 还是 sessionStorage ,存储的都是字符串,使用时别忘记做相应的转换。
兼容性:
IE6-7使用cookie保存数据。
localStorage 和 sessionStorage方法大致一样,最常用的是这几个:
1.getItem(key);获取指定key本地存储的值
2.setItem(key,value);将value存储到key字段
3.removeItem(key);删除指定key本地存储的值
4.clear();清除所有的本地存储
5.length;读取本地存储的键值对个数
6.key(i);读取本地存储第 i 个 key 的名称,i 从0开始
7.storage事件;当本地存储的数据发生变化时会触发此事件,包含的属性有:
storageArea: 表示存储类型(Session或Local)
key:发生改变项的key
oldValue: key的原值
newValue: key的新值
url*: key改变发生的URL
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没
有url属性,则应该使用uri属性。
如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
PS:在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是
同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的
storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件。
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");strStoreDate.split(",").forEach(function(n, i) { //n是当前的值,i是当前的下标。});
var storage = window.localStorage; for (var i=0; i < <span style="font-family: Arial;">storage.length</span>; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }二、浏览器 Cookie
应用场景:1、Cookies最典型的应用是判定注册用户是否已经登录网站。
2、另一个重要应用场合是“购物 车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品,这些信息都会写入Cookies,以便在最后付款 时提取信息。
方法:
1、设置 Cookie
function setCookie(name, value, expiresTime){ var date = new Date(); // expiresTime 以天计算 date.setTime(date.getTime()+expiresTime*24*3600*1000); document.cookie = name + "=" + value + ((expiresTime == null) ? "" : ";expires="+date.toGMTString()); }2、读取 Cookie
function getCookie(name){ var result = ""; if(document.cookie.length > 0){ var start = document.cookie.indexOf(name + "="); if(start !== -1){ start += (name.length + 1); var end = document.cookie.indexOf(";", start); if(end == -1){ end = document.cookie.length; } result = document.cookie.slice(start,end); } } return result; }3、删除 Cookie
原理就是设置过期时间为过去的某个时间。
function delCookie(name){ var date = new Date(); date.setTime(date.getTime() - 10000); document.cookie = name + "=-1;expires=" + date.toGMTString(); }
- HTML5 本地存储(localStorage)、会话存储(sessionStorage)和 Cookie 的区分
- LocalStorage本地存储和sessionStorage会话存储
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储-localStorage和sessionStorage
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储 LocalStorage和SessionStorage
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储应用sessionStorage和localStorage
- cookie,sessionStorage,localStorage本地存储
- 本地存储Cookie、localStorage、sessionStorage
- html5本地存储-sessionStorage,localStorage的使用
- HTML5本地存储localStorage、sessionStorage的使用
- Html5的两个本地存储对象sessionStorage和localStorage
- HTML5本地存储sessionStorage和localStorage的常用操作
- HTMl5的存储方式sessionStorage和localStorage
- h5本地存储的sessionStorage和localStorage
- java 基础之ParameterizedType
- Python--从零开始学会写爬虫(Python)
- CentOS7.2 安装 Nginx 1.9.9 教程
- 10-ext2 文件系统
- #pragma warning 说明
- HTML5 本地存储(localStorage)、会话存储(sessionStorage)和 Cookie 的区分
- Revit+高效调试+内部世界
- 全球语言缩写及名称
- 今天发现rabbitMQ消息堆积
- 大数据运维框架(二)--ansible的离线安装
- 使用ImageLoader时的基本配置和需要注意的点
- 常用的命令
- <embed /> flash wmode属性的设置
- Visual Studio版本汇总比较