JS面试题--cookie、localStorage、sessionStorage相关

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的区别

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

  //显示storage事件的详细信息
  function displayStorageEvent(e){
    var logged = "key:"+e.key+",newVlaue:"+e.newValue+",oldValue:"+e.oldValue+",url:"+e.url+
                  ", storageArea:"+e.storageArea;
    console.log(logged);
  
  }

   在chrome浏览器中查看storage的存储信息。

---

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的区别

1. cookie数据存在客户端，session的数据存在服务器
2. cookie没有session用起来安全
3. session会在一定时间内保存在服务器，当访问量增多时，会影响服务器的性能
4. cookie的数据长度及数量有限制