cookie

打开控制台，找application,如图

application是应用缓存，不用深究。
Storage是本地存储的意思。
里面用的比较多的就是cookie和localStorage。

选中cookies,如图
cookie里的数据内容有name,value,domain,path,expire,size,http,,,,,,
path表示cookie影响的路径，匹配到这个路径才能发这个cookie。

cookie的作用就是把一些信息，记录下来，存储在我们当前的页面下，对应的name&value,Domain表示当前的cookie是在哪个域下是生效的，不能乱写的。Path，是cookie生效后面是不是还有一些后缀。
Expires和maxAge是过期时间，过了生效时间，cookie会自动消失。不设这两个值，会产生session cookie,当用户关闭浏览器，这个东西就被清除了。
secure,值是true,cookie在HTTP无效，在HTTPS有的。
字段里有httpOnly,cookie不能被JS修改，避免xss的攻击。只能服务器端修改Set-Cookie修改了。
cookie是当前域名下存的一点点数据，不能超过4k大小。
cookie存的也只能是字符串。
cookie记录某些页面刷新或关闭后仍需要记录的数据，控制台用document.cookie可以直接看。可以在服务器端用HTTP协议的set-cookie让浏览器种下cookie，最常见的方法。

举个例子：打开百度，看cookie如何产生——

如图
点clear,如图

都清掉了。
再刷新下页面,再打开cookie，发现又有了。
从哪来的呢？

打开Network看看里的header：
向服务器发送请求，按HTTP协议发送的请求内容，就是Request URL。发完后，服务器给出响应。响应头的数据就是Response Headers的数据。这里面有几个个Set-Cookie，响应到了浏览器后，浏览器看到了Set-Cookie字段了，就把这些东西种到当前的cookie下。
如果已经有了cookie的数据了，再刷新，Response Headers里的Set-Cookie就少很多了，或者没有了，已经有了的就不用再设进去了。

cookie 有什么用呢？任何时候发的请求，这时候看Request Headers里的Cookie的一串数据了吧，只要你向现在这个域名下发任何请求，请求就会带它的Cookie。所以cookie太多，影响传输。服务器会Set-Cookie到浏览器下，浏览器会把cookie带上，发给服务器。
作用：
记录用户名。用JS设置cookie数据，下次刷新页面，再读取cookie，获取里面的值，展示到页面上，用户名有了。用的比较多的是购物车，购物车东西有了，下线，再登陆还在购物车里。购物车信息存储在cookie上或local Storage。

请求头就是Request Headers那些数据

举个例子——打开百度：
但是它的很多资源，比如图片的地址不是baidu.com的域名，因为很多静态资源是用不到cookie的。如果这些静态资源也用baidu.com的域名，它们也要用到cookie了，这就是无所谓的开销了。怎么办？把静态资源换个域名，当然换域名应该还有其他原因的，这时候请求这个资源，就不带cookie了，因为生效域名限制了。
还有一个功能跟session相关的。

local Storage

如图

key&value
valuue存储的只能是字符串啊。我们也可以把数据存在local Storage里，存储量可以到5兆更多。但是它只有key和value,没有生效时间，永远存在，关掉浏览器也存在，也没有作用域。
这时候就可以试着应用这些数据了：

localStorage['name']='haha'
//这时候，存储里就有了name,haha。
localStorage['name']
//'haha'  而且一直存在跟页面的刷新关闭没关系。
loccalStorage['name']={a:1,b:2}    //不是字符串啊咋办？
存储结果：[object,Object],先转换成字符串，数据丢了。
只能先把对象转化成字符串了：
localStorage['name']=JSON.stringify{a:1,b:2}
用的时候再转回去：
JSON.parth(localStorage['name'])

它就是存东西的作用，比如不联网的百度地图，先从本地的local Storage里拿，没有的再发网络请求。
内存大，永不消失，除非用JS删了。不参与网络传输，一般用于性能优化。
小封装题,看看就行，因为看不懂靠，试着解析下：

使用 localStorage封装一个 Storage 对象，达到如下效果

Storage.set('name', '饥人谷') 
Storage.set('age', 2, 30) ;  //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘饥人谷’
Storage.get('age')     //  如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers')  //如果不超过60秒，返回数组； 如果超过60秒，返

var Storage = (function(){
  return {
    set: function(key, value, expireSeconds){
      localStorage[key] = JSON.stringify({
        value: value, 
        expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
      })
    },    
//方法set是设值并存到local Storage,所以有 localStorage[key] =。
//三个参数，必须存储格式是字符串，所以转字符串.
//第三个是时间参数，没有设就返回undefined,有就记录当下毫秒数。
    get: function(key){
      if(localStorage[key] === undefined){
        return
      }
//如果没有存储key值，不返回。

      var o = JSON.parse(localStorage[key])      //从字符串转回对象。
//时间的值没有或者现在的毫秒数小于刚才执行set时的毫秒数加第三个参数的1000倍的和
//返回其值否则删掉。我靠，，，，，，能明白了，，，
      if(o.expired === undefined || Date.now() < o.expired){
        return o.value
      }else{
        delete localStorage[key]
      }
    }
 }
})()

session

用户登录淘宝了，刷新了下，还是登录状态，服务器如何判断这次发起请求的用户是刚才登录过的呢？
一开始没登陆，向服务器发请求，服务器看到请求里没cookie，表示没登陆，服务器这时候在自己内存里创建了一个对象，生成随机id，对象包含id,这个对象可以说是session了。然后session有个id ,服务器返回页面时，给响应头加了句话：Set-Cookie,把id给set上，这时候用户打开淘宝网站，就有了cookie。再刷新页面时，请求带了cookie,请求发到服务器后，服务器的那个对象还存在着，根据发过来的id跟session匹配，匹配上了，就知道是这个对象，对象对应的是个人信息的用户名，头像，信息，，，，，在渲染页面时，直接把信息加上了。session是服务器的一个对象，也可以是一种机制，结合cookie实现了识别用户身份了。