首先需要区分的是
session是服务端缓存，其对象保存在服务器上。
cookie、sessionStroage、localStrong是客户端缓存，其对象保存在浏览器。

session

session对象保存在服务器上。实际上，服务器和浏览器之间仅仅需要session id即可，服务器根据session id找到对应用户的session对象，会话数据仅在一定时间内有效，这个时间就是server端设置的session有效期。服务器的session存储数据会安全一些，一般存放用户信息，浏览器只适合存储一般数据。

cookie

1. cookie数据始终在同源的http请求中携带（即使不需要）。
2. cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
3. 因为上一条，所以也限制了cookies的大小不能过大(4k)。cookies被携带于HTTP的请求头上。
4. cookie在设置的有效期（服务端设置）内有效，通过设置max-age=seconds属性告诉浏览器cookie有效期, 不管窗口或者浏览器是否关闭。
5. cookie的配置
   cookie属性有名，值，max-age，path, domain，secure；

document.cookie = 'name=cook; max-age=9999; path=/; domain=domain; secure';

document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值，需要使用相同的名字、路径和域，新的值
// 来设置cookie，同样的方法可以用来改变有效期

// 设置max-age为0可以删除指定cookie

//读取cookie，访问document.cookie返回键值对组成的字符串，
//不同键值对之间用'; '分隔。通过解析获得需要的值

后记：

跨域怎么携带cookie

首先要知道，不能携带cookies是因为同源策略造成的：不允许js访问跨域cookies

解决方法

1. 服务器端使用CROS协议解决跨域访问数据问题时，需要设置响应消息头Access-Control-Allow-Credentials值为“true”
2. 同时，还需要设置响应消息头Access-Control-Allow-Origin值为指定单一域名（注：不能为通配符“*”）
3. 客户端需要设置Ajax请求属性withCredentials=true，让Ajax请求都带上Cookie。

// ajax
$.ajax({
 type: "GET",
 url: url,
 xhrFields: {
    withCredentials: true // 携带跨域cookie
 },
 processData: false,
 success: function(data) {
    console.log(data);  
 }
});

// axios
axios.defaults.withCredentials=true; // 让ajax携带cookie

sessionStroage和localStorage

1. sessionStroage和localStorage针对一个 session 的数据存储，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁，sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
2. localStorage没有时间限制的持久的数据存储，只要你不主动删除可以想存多久存多久。
3. 相对于cookies来说更大的容量(5M)
4. 相似的操作方法：setItem、getItem、removeItem、clear