存储状态:cookie、session、localStorage、sessionStorage与登入注册

发表于 | 分类于

参考书目：图解HTTP
若愚：cookie、session、localStorage分别是什么？有什么作用？
读图解http有感：认识HTTP—-Cookie和Session篇
复习HTTP请求与响应
cookie的相关知识
通过cookie发送sessionID
localStorage与cookie的区别
sessionStorage

Cookie、Session、Cache-Control

注意！这是响应头，不是请求头！！

复习HTTP的请求与响应

chrome 发送Request请求 –> server

1
2
3
4
5
GET /xxx HTTP/1.1
Content-Type:application/x-www-form-urlencoded;charset=UTF-8
Content-Length:160
回车换行
name=stage&age=24

server 发送Response响应 –> chrome

1
2
3
4
5
HTTP/1.1 200 OK
Content-Type:text/html; charset=utf-8
Content-Length:23570
回车换行
<!DOCTYPE html><html>.....省略</html>

登入注册功能

用到的代码：https://github.com/FrankFang/sign-in-demo

cookie

cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。

  1. 服务端通过Set-Cookie设置响应头发送给浏览器，告诉浏览器保存Cookie。response.setHeader('Set-Cookie',sign_in_email=${email})
  2. 浏览器得到cookie后，以后每次向该服务器发送请求时都会自动带上cookie
  3. 服务器读取到浏览器发送过来的cookie后，对比服务器上的数据，就知道用户的信息(email)了

cookie的特点

  • cookie不安全，可以直接在浏览器里篡改。Session 可以解决这个问题，防止用户篡改
  • cookie默认在关闭浏览器后失效（可以人为设置过期时间）
  • 大小在4kb以内

如何操作cookie

阮一峰：cookie
注意！每个cookie以分号+空格 隔开:name=stage; expires=Thu, 01 Jan 1970 00:00:00 GMT
key与value之间的等号不能有空格：name=stage不能写成name = stage

前端操作cookie

  • 获取cookie：var x = document.cookie;
  • 设置/添加cookie：document.cookie="username=stage";【如果您设置了另一个 cookie，旧的 cookie 不会被覆盖。 】
  • 修改：创建同名Cookie，覆盖原来的Cookie
  • 设置过期时间(以 UTC 或 GMT 时间）：document.cookie="username=stage; expires=Thu, 18 Dec 2018 12:00:00 GMT";则username这一条数据将在该时间过期
    • expires属性的值为 GMT 格式，表示具体过期的时间点
    • max-age属性的值为秒数，表示xx秒后过期
    • 如果同时指定了expires和max-age，那么max-age的值将优先生效。
  • 删除指定cookie：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

后端操作cookie

  • 设置过期时间：response.setHeader('Set-Cookie', 'name=stage; Expires=Thu, 18 Dec 2018 12:00:00 GMT');
    • Expires属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个 Cookie。
    • Max-Age属性指定从现在开始 Cookie 存在的秒数，比如60 60 24 * 365（即一年）。过了这个时间以后，浏览器就不再保留这个 Cookie。
    • Expires根据用户电脑时间，如果用户电脑时间不对，会影响cookie的过期时间，而Max-Age是一个相对时间，因此不受用户电脑时间的影响。
    • 如果同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。
  • 删除cookie，只需要设置为以前的时间：response.setHeader('Set-Cookie', 'name=stage; Expires=Thu, 01 Jan 1970 00:00:00 GMT')

Session

cookie存在的问题：用户可以随意篡改 Cookie
session很安全，用户无法篡改
session的有效期采用发呆时间，默认是用户不操作超过20分钟（可以人为修改发呆时间），服务器会把长时间没有活动的Session从服务器内存中清除。

Cookie与Session

当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？

  1. 服务器通过设置 Set-Cookie 响应头给浏览器一串字符串(种下cookie)
  2. 浏览器每次访问相同域名的网页时，必须带上这段字符串
  3. 浏览器要在一段时间内保存这个Cookie
  4. Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
  5. 大小大概在 4kb 以内

没有Cookie信息状态下的请求

第2次以后（存有Cookie信息状态）的请求

HTTP 请求报文和响应报文的内容如下
①请求报文（没有Cookie 信息的状态）

1
2
3
GET /reader/ HTTP/1.1
Host: hackr.jp
*首部字段内没有Cookie的相关信息

②响应报文（服务器端生成Cookie 信息）

1
2
3
4
5
HTTP/1.1 200 
Set-Cookie: name=stage; path=/; expires=Wed,10-Oct-12 07:12:20 GMT
Date: Thu, 12 Jul 2012 07:12:20 GMT
Server: Apache
Content-Type: text/plain; charset=UTF-8

③请求报文（自动带上Cookie信息发送给服务器）

1
2
3
GET /image/ HTTP/1.1
Host: hackr.jp
Cookie: name=stage

Session

  1. 服务器通过 Cookie 发送给浏览器一个 SessionID（随机数)
  2. 服务器有一块内存（哈希表）保存了所有 session
  3. 每次浏览器访问服务器时自动带上SessionID
  4. 服务器通过读取SessionID，我们可以得到对应用户的隐私信息，如 id、email
  5. 这块内存（哈希表）就是服务器上的所有 session

1
2
3
4
5
服务端：
var sessions={};
var sessionID = Math.random()*100000; //随机数
sessions[sessionId] = {sign_in_email: email};
response.setHeader('Set-Cookie', `sessionID=${sessionID}`)

由于SessionID是随机数，无法知道另一个用户的SessionID，因此无法篡改。

cookie与session的区别

  • session是基于cookie实现的。
  • cookie是session的基石。
  • cookie不安全，可以直接在浏览器里篡改。
  • session通过cookie给浏览器发送sessionID(随机数)，因此用户无法篡改
  • cookie默认在关闭浏览器后失效（可以人为设置过期时间）
  • session的有效期采用发呆时间，默认是用户不操作超过20分钟（可以人为修改有效期），服务器会把长时间没有活动的Session从服务器内存中清除。

cookie和session不归前端管，交给后端去设置和读取！

localStorage

cookie和session在浏览器每次发送请求时都会被自动带上，如果cookie或session太多太大，对传输效率会有影响。

localStorage是HTML5提供的Web 存储

  • session是存储在服务器上的哈希表(浏览数据)
  • localStorage是存储在本地的哈希表(浏览数据)

特点

  1. LocalStorage 跟 HTTP 无关，浏览器发送请求时不会带上 LocalStorage 的值
  2. 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
  3. 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
  4. 常用场景：记录有没有alert过用户，记录用户有没有点过赞（记录不敏感的信息，不能记录密码）
  5. LocalStorage 永久存储，除非用户清理缓存(chrome -> 清除浏览数据 -> 高级 -> Cookie及其他网站数据)

localStorage相关api

  • 存值：localStorage.setItem('key','value'); 或者 localStorage.key = 'value';

只能存字符串，如果是对象，要通过Json.stringify(obj)转成字符串

1
2
3
4
5
6
7
8
9
var x = localStorage;
x.setItem('name','stage');
等价于 localStorage.name = 'stage'
可以用中文：x.setItem('姓名','stage');
x.setItem('obj',JSON.stringify({'name':'stage'}))
查看所有值：console.log(x)

  • 取值：localStorage.getItem('key')
1
2
x.getItem('name');
x.getItem('obj');

  • 删除单个数据：localStorage.removeItem('key');

  • 清空：localStorage.clear();

  • 得到某个索引的key：localStorage.key(index);

localStorage与cookie的区别

cookie参与网络传输。每次浏览器发送请求时， Request headers 中都会带上cookie。
localStorage是本地存储，不参与网络传输。

cookie最大4kb
localStorage最大5mb

sessionStorage

sessionStorage的特点与localStorage的前3个特点一样
与localStorage的区别在于，sessionStorage在用户关闭页面后（会话结束）就失效。

sessionStorage的api

与localStorage的用法一样

1
2
3
4
5
6
7
8
9
10
11
var x  = sessionStorage;
存值：x.setItem('name','stage');
等价于
x.name = 'stage';
取值：x.getItem('name');
查看所有值：console.log(x)
删除单个数据：x.removeItem('name');
清空：x.clear();

sessionStorage与localStorage的区别

LocalStorage 永久存储，除非用户清理缓存
sessionStorage在用户关闭页面时（会话结束）就失效。

关于有效期

cookie在关闭浏览器后失效(可以人为修改过期时间)
session采用发呆时间，服务器会把长时间没有活动的Session从服务器内存中清除，此时Session便失效。默认用户超过20分钟不操作就失效。(可以人为修改发呆时间)
sessionStorage在关闭当前页面时失效
localStorage永久存储，除非人为清空缓存

-------------本文结束感谢您的阅读-------------