关于【cookie，web Storage】十问 （读《红宝书》）

[Sunny-lucking]

第一问：字符串最大容量是5M，那么我如果存储容量溢出了怎么办？

其实这个5M对于不同浏览器来说也是不确定的，不过大体上是一个5M的范围，溢出了怎么办，肯定会发生错误啊。浏览器会报一个名为“QuotaExceededError”的错误，如下图：

第二问：最后一次溢出的字符串是会存储到最大容量停止还是不会存储？

正常情况下，可能不会存储5M的字符串，但是也不能保证浏览器日积月累的情况下，恰巧用户也没清理过缓存，那么当最后容量接近5M的时候，我们再存储一个字符串进去的时候会发生错误，发生错误的字符串是存了一半？还是压根就没存呢？答案是--- 没存。下面是我写的一个demo，最后发现报错的时候刷新浏览器，localStorage的当前容量为发生变化。

第三问：既然存在安全问题，那么localStorage的使用就不是绝对安全的，如何更安全的使用localStorage？

前端的安全性是十分重要的一个话题，因为我们直接与用户打交道，你的程序在前端发生不可预知的错误是一定要避免的。因此这种不安全的API，我们需要找到解决办法，下面是我的一个解决办法（可能不是最优解，但是可行）。

(function(){
  var safeLocalStorage = function(key, value) {
    try{
      localStorage.setItem(key,value);
    }catch(oException){
      if(oException.name == 'QuotaExceededError'){
          console.log('已经超出本地存储限定大小！');
          // 可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存
          localStorage.clear();
          localStorage.setItem(key,value);
      }
    }
  }
  this.safeLocalStorage = safeLocalStorage;
})();

第四问 qq.com可以获得a.qq.com的cookie嘛？

子域名可以访问根域名的Cookie，反之则不行。所以不行

第五问 自己封装localStorage？有过期时间

很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：

function set(key,value){
  var curtime = new Date().getTime();//获取当前时间
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp)//exp是设置的过期时间
{
  var val = localStorage.getItem(key);//获取存储的元素
  var dataobj = JSON.parse(val);//解析出json对象
  if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
  {
    console.log("expires");//提示过期
  }
  else{
    console.log("val="+dataobj.val);
  }
}

第六问：localStorage在ios设备上无法重复setItem()

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

第七问：**面试常考题目--sessionStorage,localStorage和cookie的区别

共同点

都是保存在浏览器端，且同源的

区别

1. 与服务器的数据交换方式不同

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

2. 存储大小限制也不同

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

3. 数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

Cookie可以设置有效期、路径(path)，域（domain）

面试官一波素质三连！对于只是会使用localStorage的同学来说，肯定是不得其解的。其实这也是很多同学准备面试的时候因该考虑的问题，或者说应该主攻的方向（虽然我才毕业，但是自身遇到的问题总结出来希望对大家有帮助）。在学习知识时，懂得使用固然重要，但是如果想熟练掌握一个知识点，必须更加深刻的挖掘才可以。

第八问：cookie和session原理及区别

cookie采用的是客户端的会话状态的一种储存机制。它是服务器在本地机器上存储的小段文本或者是内存中的一段数据，并随每一个请求发送至同一个服务器。

session是一种服务器端的信息管理机制，它把这些文件信息以文件的形式存放在服务器的硬盘空间上（这是默认情况，可以用memcache把这种数据放到内存里面）当客户端向服务器发出请求时，要求服务器端产生一个session时，服务器端会先检查一下，客户端的cookie里面有没有session_id，是否过期。如果有这样的session_id的话，服务器端会根据cookie里的session_id把服务器的session检索出来。如果没有这样的session_id的话，服务器端会重新建立一个。PHPSESSID是一串加了密的字符串，它的生成按照一定的规则来执行。同一客户端启动二次session_start的话，session_id是不一样的。

区别：Cookie保存在客户端浏览器中，而Session保存在服务器上。Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

第九问：session产生的session_id放在cookie里面，如果用户把cookie禁止掉，是不是session也不能用了呢？

禁止掉cookie后，session当然可以用，不过通过其他的方式来获得这个sessionid，比如，可以跟在url的后面，或者以表单的形势提交到服务器端。从而使服务器端了解客户端的状态。

第十问 为什么说session 比cookie更安全？

真正的cookie存在于客户端硬盘上的一个文本文件，如果两者一样的话，只要cookie就好了，让客户端来分提服务器的负担，并且对于用户来说又是透明的。但实际上不是。

session的sessionID是放在cookie里，要想功破session的话，得分两步：

第一要得到sessionID。攻破cookie后，你要得到sessionID,sessionID是要有人登录，或者启动session_start才会有，你不知道什么时候会有人登录。

第二取有效sessionID。sessionID是加密的，第二次session_start的时候，前一次的sessionID就没有用了，session过期时sessionid也会失效，想在短时间内功破加了密的 sessionID很难。session是针对某一次通信而言，会话结束session也就随着消失了。

使session失效的方法：

1.关闭tomcat 2.重启web应用 3.session时间到 4.无效的session

第十一问 cookie和session的区别：

①存在的位置：

cookie 存在于客户端，临时文件夹中； session存在于服务器的内存中，一个session域对象为一个用户浏览器服务

②安全性
cookie是以明文的方式存放在客户端的，安全性低，可以通过一个加密算法进行加密后存放； session存放于服务器的内存中，所以安全性好

③网络传输量
cookie会传递消息给服务器； session本身存放于服务器，不会有传送流量

④生命周期(以20分钟为例)
cookie的生命周期是累计的，从创建时，就开始计时，20分钟后，cookie生命周期结束；

session的生命周期是间隔的，从创建时，开始计时如在20分钟，没有访问session，那么session生命周期被销毁。但是，如果在20分钟内（如在第19分钟时）访问过session，那么，将重新计算session的生命周期。关机会造成session生命周期的结束，但是对cookie没有影响

⑤访问范围
cookie为多个用户浏览器共享； session为一个用户浏览器独享