session,cookie,sessionStorage,lo

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据的交互。

cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别

1. 保持状态：cookie保存在浏览器，session保存在服务器端。
2. 使用方式
   (1) cookie机制：
   如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
   cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。
   (2)session机制：
   当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器会根据该id返回对应session对象。如果客户端请求中没有包含sessionid,服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。
3. 存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象（session中可能包含多个对象）；
4. 存储的大小： 单个cookie保存的数据不能超过4kb;session大小没有限制。
5. 安全性：
   cookie:针对cookie所存在的攻击：Cookie欺骗，Cookie截获；
   session的安全性大于cookie;
   原因：
   （1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；
   （2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；
   （3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。
   （4）sessionID是加密的
   （5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。
6. 应用场景：
   cookie：

• 判断用户是否登陆过网站，以便下次登陆时能够实现自动登陆（或者记住密码）。如果我们删除cookie，则每次登陆必须从新填写登录的相关信息。
• 保存上次登录的时间等信息。
• 保存上次查看的页面。
• 浏览次数。
  session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过sessionID来区分不同的客户。
• 网上商城中的购物车。
• 保存用户登陆信息
• 将某些数据放入session中，供同一用户的不同页面使用。
• 防止用户非法登陆。

7. 缺点：
   cookie：

• 大小受限
• 用户可以操作（禁用）cookie，使功能受限
• 安全性较低
• 有些状态不可能保存在客户端。
• 每次访问都要传送cookie给服务器，浪费带宽。
• ookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
  session:
• Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
• 依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
• 创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

WebStorage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage的两个主要目标：

• 提供一种在cookie之外存储会话数据的路径
• 提供一种存储大量可以跨会话存在的数据的机制。
  HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1. 生命周期：

• localStorage:
  localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
• sessionStorage:

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2. 存储大小
   localStorage和sessionStorage的存储数据大小一般都是：5MB
3. 存储位置
   localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
4. 存储内容类型
   localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5. 获取方式

• localStorage
  window.localStorage;
• sessionStorage
  window.sessionStorage

6. 应用场景

• localStorage
  常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
• sessionStorage
  敏感账号一次性登录；

webStorage的优点

1. 存储空间更大：cookie为4KB，而WebStorage是5MB；
2. 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
3. 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
4. 快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
5. 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
6. WebStorage提供了一些方法，数据操作比cookie方便；

• setItem (key, value) —— 保存数据，以键值对的方式储存信息。
• getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
• removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
• clear () —— 删除所有的数据
• key (index) —— 获取某个索引的key

使用方法

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

1. 判断浏览器是否支持localStorage

 if(window.localStorage){
        alert("浏览器支持localStorage");
    }else{
        alert("浏览器不支持localStorage");
    }

 if(window.sessionStorage){
        alert("浏览器支持sessionStorage");
    }else{
        alert("浏览器不支持sessionlStorage");
    }

2. localStorage和sessionStorage操作
   localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
   localStorage和sessionStorage的方法：

• setItem存储value
  用途：将value存储到key字段。

 sessionStorage.setItem("username","张三");
        localStorage.setItem("username","李四");

image.png

• getItem获取value
  用途：获取指定key本地存储的值
  用法: .getItem(key)

       let ss=sessionStorage.getItem("username");
       alert(ss);
       let ls=localStorage.getItem("username");
       alert(ls);

• removeItem删除key
  用途：删除指定key本地存储的值
  用法： .removeItem(key)

sessionStorage.removeItem("username");  localStorage.removeItem("username");

• clear清楚所以的key/value
  用途：清除所有的key/value
  用法： .clear

      sessionStorage.clear();
      localStorage.clear();

3. 其它操作：点操作和[];
   web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储；

 let ss=window.localStorage;
    ss.key1="hell";
    ss["key2"]="word";
    console.log(ss.key1);
    console.log(ss["key2"]);

4. localStorage和sessionStorage的key和length属性实现遍历
   sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

 var storage=window.localStorage;
    for(var i=0,len=storage.length;i<len;i++){
        var key=storage.key(i);
        var value=storage.getItem(key);
        alert(key+"="+value);
    }

5. storage事件
   storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){ 
 window.addEventListener("storage",handle_storage,false); 
}
else if(window.attachEvent)
{ 
 window.attachEvent("onstorage",handle_storage); 
} 
function handle_storage(e){
 if(!e){e=window.event;} 
}