localStorage & cookie & session

cookie

Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。用来记录某些当页面关闭或者刷新后仍然需要记录的信息。
浏览器需要保存这段数据，不得轻易删除。cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法
此后每次浏览器访问该服务器，都必须带上这段数据。所以如果 cookie 太多太大对传输效率会有影响。

session

session是一次浏览器和服务器的交互的会话，session是存在服务器的，用于区分会话和不同用户的访问。
用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。
创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
cookie & session 的不同：
cookie是存在浏览器的，根据请求的路径自动发送的，服务器端可以对其进行处理
session是存在服务器的，用于区分会话和不同用户的访问
cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。

localStorage

localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
不参与网络传输。
一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

localStorage用法
localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤

            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);    //1

1.png

localStorage的删除
所有内容删除

var storage=window.localStorage
storage.a=1
storage.setItem("c",3)
console.log(storage)
storage.clear()
console.log(storage)    //没有了a和c

删除某一项

            var storage=window.localStorage
            storage.a=1
            storage.setItem("c",3)
            console.log(storage)
            storage.removeItem("a")
            console.log(storage.a)    //undefined

查询

            var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i