关于cookie、session、sessionStorage、localStorage各自的特点和使用方法

因为HTTP协议是一种无状态协议,每一次HTTP请求都是独立的,不受它之前和之后的请求的影响,所以比如登录信息,这次请求带着登录的信息,下次请求不知道有没有登录,无法追踪上次的请求,所以如果没有别的手段只能每次传很多参数。

cookie和session,可以与服务器交互通信的。

Cookie:

cookie保存在浏览器端,单个数据大小不超过4KB,是服务器发送到客户端的特殊信息,保存成字符串类型以文本的方式保存在客户端,会随着每次HTTP请求头request header发送到服务器端。如果不在浏览器中设置过期时间,cookie被保存在内存中,浏览器关闭就会删除这些cookie信息;如果设置了过期时间,cookie被保存在硬盘中,直到过期时间才会删除这些信息。

cookie应用场景:记录是否登录,上次登录时间,浏览的页面,浏览次数等

cookie的缺点:

1)存储空间很小,只有4kb,存储数量限制,一般一个站点只能有20个cookie

2)用户可以操作(禁用或者修改删除)cookie,使功能受限

3)安全性较低

4)每次访问都要传送cookie给服务器,浪费带宽,如果保存过多数据影响性能。

获取cookie:

var cookieData = document.cookie; 
// cookie是每个cookie键值对通过一个分号+空格的形式串联起来的,例:key1=value1; key2=value2; key3=value3; 

设置/修改cookie:

cookie选项包括:

expires(http/1.0协议中的过期时间,GMT格式)、

max-age(http/1.1协议中的单位是秒的时间段,失效时间是创建时间 + max-age)、

domain(域名)、path(路径)、

secure(当请求是HTTPS或者其他安全协议时,包含 secure 选项的 cookie才能被发送至服务器,安全协议时才能在客户端设置secure参数)、

HttpOnly(在客户端是不能通过js代码去访问一个httpOnly类型的cookie的,也不能设置httpOnly参数,这种类型的cookie只能通过服务端来设置)

// 设置cookie以及过期时间
var exp = new Date();
exp.setDate(exp.getDate() + 1);
document.cookie = "key=value; expires=" + exp.toGMTString();
// 如果不设置过期时间,浏览器关闭就会删除cookie
document.cookie = "key=value";

删除cookie:

// 设置过期时间为现在以前的时间
var exp = new Date();
exp.setDate(exp.getDate() - 1);
document.cookie = "key=; expires=" + exp.toGMTString();

Session:

session保存在服务器端内存中,没有大小限制,通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)。服务器端创建session对象时会检测客户端请求有没有包含sessionId,如果没有就创建一个并且返回给客户端,客户端一般记在cookie里,如果HTTP请求带着sessionId,就返回对应的session对象。如果用户禁用cookie,需要使用response.encodeURL(url)进行URL重写把sessionID拼在url后面。每次启动session_start后前一次的sessionID就失效或者session过期后sessionID也会失效。

session应用场景:保存用户登录信息,防止用户非法登录等。

session的缺点:

1)扩展性弊端,要求客户端代码和服务端代码在同一台服务器上,协议/域名/端口号一致。(PS:如果不在同一个服务器上,可以使用token进行身份验证)

2)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。而且当用户离开网站后,这些session还会保存一段时间,造成资源浪费。

3)重启服务器,session数据会丢失。

4)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全

5)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护


WebStorage:localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据,不与服务器交互通信。存储大小5MB。只能存储字符串。存储的数据直接本地获取,比HTTP请求快。

sessionStorage:

sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。应用场景:每次打开网页需要重新登录的登录信息。

保存数据语法:

sessionStorage.setItem("key", "value");
// 或者
sessionStorage.key = value;
// 或者
sessionStorage["key"] = value;

读取数据语法:

var lastname = sessionStorage.getItem("key");
// 或者
var lastname = sessionStorage.key;
// 或者
var lastname = sessionStorage["key"];
// 获取key名
sessionStorage.key(index); // 一般用不到,因为不仅仅有自己存的,所以你不知道你想要的那个key的index是啥

删除指定键的数据语法:

sessionStorage.removeItem("key");

删除所有数据:

sessionStorage.clear();

localStorage:

localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。应用场景:长期登录的保存登录信息。

保存数据语法:

localStorage.setItem("key", "value");
// 或者
localStorage.key = value;
// 或者
localStorage["key"] = value;

读取数据语法:

var lastname = localStorage.getItem("key");
// 或者
var lastname = localStorage.key;
// 或者
var lastname = localStorage["key"];
// 获取key名
localStorage.key(index); // 一般用不到,因为不仅仅有自己存的,所以你不知道你想要的那个key的index是啥

删除数据语法:

localStorage.removeItem("key");

删除所有数据语法:

localStorage.clear();
©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值