本地客户端存储:cookie,session Storage, Local Storage

为什么要用cookies

从本质上来讲http协议是一种无状态的协议,客户与服务器建立连接,传送数据,当数据传送完连接断开。再次交互需要再次建立连接,因此服务器无法追踪客户上一步干了什么。这严重影响了基于web的应用交互,也影响了用户的体验。比如说用户在登录了网站之后需要进一步的操作,在浏览了几个其他页面后,浏览器就不知道用户是否登录了本网站。

cookie就是解决http无状态的有效手段,服务器可以设置或者读取cookie中保存的信息。当用户登录后,服务器会发送包含登录凭据的cookie到客户端,进行某种形式的存储。等到用户下次登录时,浏览器会向服务器发送cookie信息,服务器验证合法的用户不必再次输入密码就可直接登录。

说到cookie不能不说本地存储了。

本地存储的优点:

  • 避免取回代码前一片空白,若是不需要新的数据可以减少向服务器的请求次数,从而减少用户等待服务器的响应时间。

  • 网路状态不好时可以离线显示存储部分。

    常见的几种本地存储:打开chrome——>f12——>Application

1.cookie:

cookie的实现:

Cookie定义了一些HTTP请求头和HTTP响应头,通过这些HTTP头信息使服务器可以与客户进行状态交互。客户端请求服务器后,如果服务器需要记录用户状态,服务器会在响应信息中包含一个Set-Cookie的响应头,客户端会根据这个响应头存储Cookie信息。再次请求服务器时,客户端会在请求信息中包含一个Cookie请求头,而服务器会根据这个请求头进行用户身份、状态等较验。

cookie的特点:是客户端存储数据的一种选项,可以在服务器端或者客户端设置到期时间,如果不设置,随着关闭网页而消失。cookie一般存放大小为4k,即就是大约二十多条信息。

cookie的使用场景:有些网站有记住用户名的功能,当你勾这个的时候,下次进入该网站时,就会保存上一次登录的用户名。

栗子:用cookie实现自动登录:

当用户在某个网站注册后,就会收到一个惟一用户ID的cookie。客户后来重新连接时,这个用户ID会自动返回,服务器对它进行检查,确定它是否为注册用户且选择了自动登录,从而使用户务需给出明确的用户名和密码,就可以访问服务器上的资源。

2.Session Storage:

sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

使用场景:sessionStorage 非常适合SPA(单页应用程序),可以方便在各业务模块进行传值。

3.Local Storage:

localStorage生命周期是永久,也就是说除非用户去清除localStorage信息,否则这些信息将永远存在。存放数据大小一般为5MB(拓宽了cookie的存储大小),仅在客户端(即浏览器)中保存,不参与和服务器的通信。

Local Storae局限:

  • 不能被网络爬虫抓到

  • 在浏览器隐私模式下不能读取。

  • 存储内容过多的话会很卡。

使用场景:一些网站提供的编辑器,自带草稿功能,每隔几秒钟或几分钟自动保存当前编辑的内容,刷新页面,或是把浏览器关掉重新打开编辑页面可以自动恢复之前编辑的内容的。这种信息就适合存放在 localStorage 中。

4.session——服务器端的存储方式

session其实分为客户端Session和服务器端Session。

当用户第一次和服务器简历连接时,服务器会给用户分发一个SessionID作为标识(随机的由24个字符组成),用户每次提交页面,浏览器会把这个sessionID包含在HTTP头部提交给服务器,这样服务器就能区分请求页是哪一个客户端,这个sessionID就是保存在客户端的,属于客户端。

 其实客户端Session默认是以cookie的形式来存储的,所以当用户禁用了cookie的话,服务器端就得不到SessionID。唯一的SessionId还是有很大的实际意义,当一个用户提交表单时,浏览器就会将用户的SessionId自动附加在HTTP头信息中,当服务器 处理完这个表单后,就会将结果返回给SessionId所对应的用户。

存储时间:自动退出登录时,session销毁。


随后有补充的会添加上。。。。。。。

发布了79 篇原创文章 · 获赞 36 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/yezi__6/article/details/88908357