1 Cookie简介
Cookie:是一个在服务器与客户端之间来回传递文本值的机制。服务器可以基于其放在cookie中的数据在不同的web页面间追踪用户的信息。每次用户访问某个域的时候,cookie数据都会被来回传送。
使用cookie的场景:
- cookie可以存储会话标识,使得web服务器能够通过cookie中存储的同服务器端购物车数据库对应的唯一ID,来识别哪个购物车属于当前用户。这样,用户在页面切换时,购物车也可以同步更新
- cookie可以将本地个性化数据存储在应用程序中,以便后续加载网页的时候使用
2 使用HTML5 Web Storage API
- 检查浏览器的支持性
- 设置和获取数据
- 封堵数据泄漏
- localStorage和sessionStorage
- Web Storage APU的其他特性和函数
- 更新Web Storage后的通信
2.1 检查浏览器的支持性
在特定域下的storage数据库可以直接使用window对象访问。注意:这里要在web服务器上获取页面才有用
// 检测浏览器的支持性
function checkStorageSupport(){
if(window.sessionStorage){
console.log("支持sessionStorage")
}else{
console.log("不支持sessionStorage")
}
if(window.localStorage){
console.log("支持localStorage")
}else{
console.log("不支持localStorage")
}
}
2.2 设置和获取数据
注意:设置和获取数据的调用不必出现在同一个网页中,只要网页是同源的(包括规则、主机和端口),基于相同的键,我们能够在其他网页获取或者设置数据的值
//setItem设置数据 key value
window.sessionStorage.setItem('myKey','myValue');
//getItem通过key值获取数据
window.sessionStorage.getItem('myKey');
//也可以使用下面的方式设置数据
window.sessionStorage.mySecKey='SecValue';
2.3 封堵数据泄漏
数据能够保存多久?
对于sessionStorage里数据,只要浏览器窗口(或者标签)不关闭,它们就一直存在。
sessionStorage适用于短时存在的流程中,如对话框或向导。
如果数据需要存储在多个页面中,同时用户又不希望下一次访问应用程序时重新部署,则可以将这些数据放在sessionStorage中。
另一种特殊用法:数据作用域,以购买机票的应用程序为例。用户在使用应用时,服务器应用程序能记住用户先前选择的偏好数据。但是用户打卡多个标签页浏览航班的时候,这时候可能会导致cookie系统出现问题。当在其中一个标签也修改了cookie值,而在其他窗口中意外的将这些值应用到URL相同的另一个网页的后续操作中。这一现象称为数据泄漏。下图揭示了出现数据泄漏的情况。
而使用sessionStorage能够跨页面暂存如启程日期这样的临时数据,由不会将其泄漏到用户仍在浏览其他航班信息的窗口中。这样,不同的偏好信息就会被隔离在预定相应航班的窗口中。
2.4 localStorage 和sessionStorage
当应用程序会用到多个标签页或者窗口中的数据,或多个视图共享的数据。在这种情况下,使用localStorage比较合适。
区别:
- 在编程上访问它们的名称不同
- 行为上的差异是数据的保存时长及它们的共享方式
sessionStorage | localStorage |
数据会保存在存储它的窗口或者标签页关闭时 | 数据的生命周期比浏览器的生命周期长 |
数据只在构建它们的窗口或者标签页内可见 | 数据可以被同源的每个窗口或者标签也共享 |
2.5 Web Storage API的其他特性和函数
- length 属性 表示当前Storage对象存储的键值对的数量
- key(index) 获取指定位置的键
- getItem(key) 获取键值对应的数据
- setItem(key,value) 设置数据 ,插入太多数据可能会引起异常
- removeItem(key) 删除数据项
2.6 更新Web Storage后的通信
应用程序可能会在存储数据被修改后触发一系列操作。
//添加监听器即可接收同源窗口的Storage事件
window.addEventListener('storage',displayStorageEvent,true);
StorageEvent对象:
- key 包含了存储中被更新或者删除的键
- oldValue 包括更新键前对应的数据
- url Storage世间发生的源
- storageArea 是一个引用,指向发生改变的localStorage或者sessionStorage
在chrome浏览器中查看storage的存储信息。//显示storage事件的详细信息 function displayStorageEvent(e){ var logged = "key:"+e.key+",newVlaue:"+e.newValue+",oldValue:"+e.oldValue+",url:"+e.url+ ", storageArea:"+e.storageArea; console.log(logged); }
3 相关的一些题
(1)如何实现浏览器内多个标签页之间的通信
调用localstorage、cookie等数据存储通信方式。
(2)如何删除一个cookie?
将cookie的过期时间设置为在当前时间之前就可以
document.cookie="user=hua;expires="+new Date(0);
(3)什么是JavaScript cookie?
cookie是存储在访问者计算机里的变量。每一台计算机通过浏览器请求某个页面时,就会发送这个cookie。可以使用JS创建和获取cookie的值。
(4)谈谈cookie的兼容兼容性
- 每个特定的域名下,cookie字段个数是有限制的
- 当cookie的字段个数超出浏览器的限制时,IE和Opera会清理最后的cookie,而FireFox会随机清理cookie
- cookie的数据总量,最大为4096字节,为了兼容性,一般不能超过4095字节
(5)使用cookie时的注意事项
cookie具有极高的可扩展性和可用性。在使用的时候要注意以下几点:
- 控制保存在cookie里的session对象的大小
- 通过加密和安全传输技术(SSL),降低cookie被破解的可能性
- 在cookie中不要存放敏感数据
- 控制cookie的生命周期,不要使之永远有效
(6)谈谈cookie的缺点
- cookie的长度和数量有限制。一般只能设置大约4KB的数据
- 只要有请求涉及cookie,cookie就要在服务器端和客户端来回传送。一方面来说cookie数据在网络上是可见的,它们在不加密的情况下会有安全风险,另一方面cookie数据会消耗网络带宽。
- 安全性问题-->cookie如果被别人拦截了,他只需原样转发cookie就可以取得session。
- 有些状态不可能保存在客户端。例如为了防止重复提交表单,需要在服务器保存一个计数器,若这个计数器保存在客户端起不到任何作用
(7)cookie和session的区别
- cookie数据存在客户端,session的数据存在服务器
- cookie没有session用起来安全
- session会在一定时间内保存在服务器,当访问量增多时,会影响服务器的性能
- cookie的数据长度及数量有限制