cookies,localStorage,sessionStorage,session

一.cookies

1.cookies的产生

cookies的产生是因为服务器端无法维持状态,服务器无法区分两个请求是否来自于同一个浏览器.

2.cookies是什么

cookies是服务器添加保存在客户端的一小块数据,即浏览器存储在用户电脑上的文本文件.

3.cookies举例详解

(1).创建cookie
<1>.服务器接受到客户端的请求后,在响应头中添加一个Set-Cookie选项

eg:
    HTTP/1.0 200 OK
    Content-type: text/html
    Set-Cookie: yummy_cookie=choco
    Set-Cookie: tasty_cookie=strawberry

<2>.浏览器在收到响应后保存下cookie,之后的每次请求都会将cookie发送给服务器,另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

    GET /sample_page.html HTTP/1.1
    Host: www.example.org
    Cookie: yummy_cookie=choco; tasty_cookie=strawberry

(2).会话期cookie

浏览器会话期存在,浏览器关闭后,cookie自动删除,会话期间不需要设置过期时间(Expires)和有效期(Max-Age),有的浏览器提供会话恢复功能,即使关闭浏览器也会保留cookie.保存在内存中.

(3).持久性cookie

持久性cookie会设置过期时间或者有效期,保存在硬盘上,关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间
eg:Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;    

(4).cookie中的secure和HttpOnly标记

标记Secure需要通过https协议通道加密后发送给服务器,但因为Cookie有其固有的不安全性，Secure 标记也无法提供确实的安全保障从 Chrome 52 和 Firefox 52 开始，不安全的站点（http:）无法使用Cookie的 Secure 标记。
为了避免通过Document.cookie进行跨域脚本(XSS)攻击,就要用HttpOnly标记
eg:Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

(5).domain选项

指定了cookie将要被发送到哪个或者哪些域中,默认情况下,会被设置为创建该 cookie 的页面所在的域名
eg: Set-Cookie: name=PHPSESSID; domain=segmentfault.com

(6).path选项

path选项指定了哪些路径可以接受cookie,以/为路径会匹配其下的所有子路径
eg:设置 Path=/docs，则以下地址都会匹配：
/docs
/docs/Web/
/docs/Web/HTTP

4.cookies应用场景

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

二.localStorage和sessionStorage

1.localStorage的产生

由于cookie在客户端的存储大概是4k,过多的cookie会导致存储空间不足,需要一个能存储大量信息的仓库.

2.localStorage是什么

他实质是存储在客户端的hash表

3.localStorage API详解

(1).设置

eg:
//三种设置字段的方式
f(！window.localStorage){
        alert("浏览器支持localstorage");
        return false;
    }else{
        var storage=window.localStorage;
        //写入a字段
        storage["a"]=1;
        //写入b字段
        storage.a=1;
        //写入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
    }

(2).读取

 eg:
 //三种读取方式
 storage.a;
 storage.['b'];
 storage.getItem('c')

(3).删除

<1>.删除键值对

    storage.removeItem(key);

<2>.清除所有

    storage.clear();

4.cookie,localStorage和sessionStorage的区别

三.session

1.session的产生

cookie是存储在客户端的,很容易被篡改,这个时候就需要一种相对较安全的存储方式,session应用而生.

2.session的定义

是将信息存储在服务器端的一种机制.当客户端第一次访问服务器时,会在服务器端生成一个session,当需要保存用户数据的时候自动保存到服务器的session中

3.session的工作流程

客户端为client,服务器为server
(1).生成sessionId:当client第一次访问server时,server会生成一段随机数,即sessionID,将sessionID放在响应头中,以cookie的形式返回给client,大概是这样：cookie：sessionID=1234567.
(2).保存sessionId及用户数据:server将用户数据保存到sessionID下,再将sessionId保存到内存中.
(3).访问session,当client再次访问server时,client会带上首次访问server时获得的值为sessionID的cookie,server在拿到cookie中的sessionID去内存中查找,如果找到就返回给client.
注意:
java，保存于服务器内存中，重启服务器，session 消失
php，保存于服务器文件中，重启服务器，session 依然存在
nodejs，保存于服务器内存中，重启服务器，sessino 消失

4.cookie和session的区别

1.cookie在存储在客户端,session在服务器端
2.cookie在客户端可以查看和修改,session不可以,session比cookie存储更安全
3.session的实现是基于sessionID,cookie中存有sessionID,所以,session是基于cookie的一种数据存储方式