面试题--session、cookie和web Storage总结

前言

cookie最初主要用于和服务器进行通讯，在http请求时把cookie顺带一起传给服务器。

但那时还未有像H5 localStorage和sessionStorage这种专门用于本地存储的能力。后来，

大家发现通过document.cookie = '';  可直接设置cookie的值且无论页面如何刷新cookie也不会被清除掉，

渐渐的，越来越多的人开始使用cookie来做本地存储。

比如在控制台设置cookie后

我们能够通过谷歌开发者工具的Application选项看到cookies中上面设置的cookie名字和值

---

使用cookie做本地存储的3个缺点

1： 存储太小，最大4KB

2： 随http请求一起被发送到服务端，增加了请求数据量

3：document.cookie这个API过于简陋，存在安全隐患

使用localStorage和sessionStorage做本地存储的3个优点

1： 存储容量大，最大5M

2： 不会随http请求一起被发送到服务端，减少了请求数据量

3： 提供更简单易用的API，setItem和getItem

localStorage和sessionStorage的区别

localStorage： 永久存储数据，除非代码或手动删除

sessionStorage： 临时存储数据，浏览器关闭后自动清除

cookie和localStorage的区别

一、容量

cookie容量在4K左右，且有条数限制。localStorage的容量有5M。

二、是否向服务器发送数据

cookie会向服务器发送数据，localStorage不会往服务器发送数据。

三、过期时间

cookie的有过期时间，在没有设置过期时间，关闭浏览器就消失，默认过期时间是一次会话。localStorage没有过期时间。

四、路径限制

cookie有路径的限制。localStorage没有路径的限制。

五、存储类型

cookie存储的是字符串，字符串，字符串。localStorage存储的是对象，对象，对象。

cookie和web Storage的区别

1、cookie在浏览器与服务器之间来回传递
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。

2、数据有效期不同
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage 始终有效，长期保存。

3、cookie数据还有路径的概念，可以限制cookie只属于某个路径下
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4、作用域不同      sessionStorage不在不同的浏览器窗口中共享
localStorage在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

总结：实用方法：

1.cookie的读写：

function setCookie(name,value)
{
  var Days = 30; //此 cookie 将被保存 30 天
  var exp  = new Date();    //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString();
}
function getCookie(name)
{
  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
  if(arr != null) return unescape(arr[2]); return null;
}
function delCookie(name)
{
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null) document.cookie=name +"="+cval+";expires="+exp.toGMTString();
}


删除所有cookies

function clearCookie(){
var keys=document.cookie.match(/[^ =;]+(?==)/g);
if (keys) {
for (var i = keys.length; i--;)
document.cookie=keys[i]+'=0;expires=' + new Date( 0).toUTCString()
}
}

2.sessionStorage的读写

存取值：
window.sessionStorage.setItem("key", "value");
获取值：
window.sessionStorage.getItem("username");
删除指定键

sessionStorage.removeItem("key");
删除所有

sessionStorage.clear();

3.localStorage

localStorage.setItem("key", "value");
读取数据语法：

var lastname = localStorage.getItem("key");
删除数据语法：

localStorage.removeItem("key");

删除所有

sessionStorage.clear();

注：Web Storage API内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发 storage 事件，并把它发送给所有感兴趣的监听者。因此，如果需要跟踪存储区域的改变，就需要在关心存储区域内容的页面监听 storage 事件.

代码：

if (window.addEventListener) {
    window.addEventListener("storage", handleStorage, false);
} else {
    window.attachEvent("onstorage", handleStorage);
}

总结

• cookie
• cookie
• cookie的应用场景
• cookie与session的区别
• cookie与web storage的区别

cookie

在程序中，会话跟踪是很重要的事情。理论上，一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆。 而Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。 于是出现了cookie和session用于记录客户端信息用于服务器区分不同的客户，只是Cookie保存在客户端浏览器中，而Session保存在服务器上。

cookie的应用场景

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

cookie与session的区别

• 1.cookie数据存放在客户的浏览器上，session数据放在服务器上；
• 2.cookie不安全，他人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应该使用session；
• 3.session会在一定时间内保存在服务器上。当访问增多，会占用服务器资源，考虑到服务器性能应使用cookie；
• 4.单个cookie保存的数据量不能超过4k，同一站点最多保存20个cookie

cookie与web storage的区别

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地； 不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

1.cookie的作用是与服务器交互，作为http规范的一部分，而web storage是为了本地存储数据而诞生的；

2.cookie会将数据发给服务器，web storage仅在本地保存；

3.cookie的数据大小限制为4k，同一域名下的cookie数量限制为20个，web storage数据大小限制为5M；

4.localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除，sessionStorage数据在当前窗口关闭后自动删除，cookie设置的过期时间之前一直有效，即使窗口或浏览器关闭；

5.sessionStorage在打开不同的浏览器窗口不共享，即使是同一页面，localStorage在同源页面是共享的，cookie在同源页面是共享的。