前端 cookie与本地存储与实践

来源:http://www.chinese-glasses.com 作者:Web前端 人气:85 发布时间:2020-03-31
摘要:时间: 2019-10-27阅读: 169引言 cookie cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用「document.cookie」查看你当前正在浏览的网站

时间: 2019-10-27阅读: 169引言

cookie

  • cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 「document.cookie」查看你当前正在浏览的网站的cookie。
document.cookie
"CONSENT=YES+HK.zh-CN+20171217-09-0; APISID=RZtL-ilrzVaXbd9g/AFwJ-gcAlNrwiyi_r; SAPISID=9xvOHFFgwpLgBSRn/ANzvjCQTYJZmu7W1N; SID=6wXQVnPJike66M7n8IVuPI_CCcj3ObwfmnsynuOsm0vyYa58eokha63tv6em_-OQFGugKQ.; 1P_JAR=2018-4-3-1"

10bet 1

2.png

  • cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie,这是最常见的做法。
    (打开一个网站,清除全部cookie,然后刷新页面,在network的Response headers试试找一找set-cookie吧)
    每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。

一般浏览器存储cookie 最大容量为4k,所以大量数据不要存到cookie。

一个项目考虑缓存和不考虑缓存完全是两个难度,在用户体验上也截然不同。考虑缓存肯定得了解web本地存储与它们的区别和适用场景。正好这次负责一个项目,在做了这个项目后抽空给大家来一次总结,希望能给大家带来帮助。

设置cookie时的参数:

  • path:表示 cookie 影响到的路径,匹配该路径才发送这个 cookie。
  • expires 和 maxAge:告诉浏览器 cookie 时候过期,maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie,session cookie 是 transient 的,当用户关闭浏览器时,就被清除。一般用来保存 session 的 session_id。
  • secure:当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效
  • httpOnly:浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true,这样可以避免被 xss 攻击拿到 cookie。

cookie1.是什么Cookie指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。2.为什么因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结帐时,由于HTTP的无状态性,不通过额外的手段,服务器并不知道用户到底买了什么,所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息,借此维护用户跟服务器会话中的状态。3.设置

session

  • 当一个用户打开淘宝登录后,刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢?
  • 这里就使用了session保存状态。用户在输入用户名密码提交给服务端,服务端验证通过后会创建一个session用于记录用户的相关信息,这个 session 可保存在服务器内存中,也可保存在数据库中。
  • 创建session后,会把关联的session_id 通过setCookie 添加到http响应头部中。
  • 浏览器在加载页面时发现响应头部有 set-cookie字段,就把这个cookie 种到浏览器指定域名下。
  • 当下次刷新页面时,发送的请求会带上这条cookie, 服务端在接收到后根据这个session_id来识别用户。

前端后端都能设置前端可以通过js-cookie这个库来设置键值、过期时间、域名,然后主动调用接口的时候讲cookie放到request header里面

总结一下:

cookie 是存储在浏览器里的一小段「数据」,它的主要用途有保存登录信息,而session是一种让服务器能识别某个用户的「机制」,session 在实现的过程中需要使用cookie。当然有时候说到 session 也指服务器里创建的那个和用户身份关联的对象。

Cookies.set('name','value', {expires:7,domain:'xxx'})

localStorage

  • localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中,保存后数据永远存在不会失效过期,除非用 js手动清除。
  • 不参与网络传输。
  • 一般用于性能优化,可以保存图片、js、css、html 模板、大量数据。

后端也可以设置cookie,不过设置cookie放在response header里面注意cookie是存储在用户本地终端的,然后每次访问网站都会带上!

sessionStorage

sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。

4.注意点

三者的异同

10bet 2

3.png

Cookie会被附加在每个HTTP请求中,所以无形中增加了流量。

应用场景

  • 因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了~
  • 10bet,而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了

由于在HTTP请求中的Cookie是明文传递的,所以安全性成问题,除非用HTTPS。对于存储登录状态,用token也比用cookie好,一方面安全,一方面去中心化,后面有空肯定会专门写一篇文章来细说登录的。

安全性

需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

Cookie的大小限制在4KB左右,对于复杂的存储需求来说是不够用的。

范例

使用 localStorage封装一个 Storage 对象

var Storage = (function(){
  return {
    set: function(key, value, expireSeconds){
      localStorage[key] = JSON.stringify({
        value: value, 
        expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
      })
    },
    get: function(key){
      if(localStorage[key] === undefined){
        return
      }
      var o = JSON.parse(localStorage[key])
      if(o.expired === undefined || Date.now() < o.expired){
        return o.value
      }else{
        delete localStorage[key]
      }
    }
 }
})()
Storage.set("name","xiaohui")
Storage.get("name")
"xiaohui"
Storage.set('age',2,30)//  如果不超过30秒,返回数字类型的2;如果超过30秒,返回 undefined,并且 localStorage 里清除 age 字段
Storage.get("age")
2

由于cookie可以设置domain,设置父级域名上的cookie子域名也能读到,这个是我唯一适用cookie的地方,跨域信息共享。

H5本地存储

本文由10bet发布于Web前端,转载请注明出处:前端 cookie与本地存储与实践

关键词:

最火资讯