Cookie、 LocalStorage 与 SessionStorage区别与用法

Cookie、 LocalStorage 与 SessionStorage区别与用法

特性 Cookie LocalStorage sessionStorage
生命期 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(同一窗口或标签页)有效,关闭页面或浏览器后被清除
大小 4K左右 一般为5MB 一般为5MB
与服务端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 仅在客户端(即浏览器)中保存,不参与和服务器的通信
应用 登录状态,记住密码,用户自定义设置,跟踪分析用户行为 需要长期保存的东西,比如编辑的文字草稿 购物车信息,登录的用户信息

安全性

通常我们会通过cookie来与服务端通信,来保存我们的登录状态,但由于Cookie有其固有的不安全性,所以敏感信息不应该通过Cookie传输。
为了避免跨域脚本 (XSS) 攻击,我们可以设置cookie中的 HttpOnly 属性,这样客户端便不能通过JavaScript的 Document.cookie API 来访问。
有些恶意网站可以设法伪造带有正确 Cookie 的 HTTP 请求,来实现 CSRF 攻击。可以设置SameSite Cookie允许服务器要求某个cookie在跨站请求时不会被发送,从而可以阻止跨站请求伪造攻击(CSRF)。但目前SameSite Cookie还处于实验阶段,并不是所有浏览器都支持。

使用

localStorage和sessionStorage

localStorage和sessionStorage都具有相同的操作方法:

  • 读取 localStorage 项 getItem(‘key’)

    localStorage.getItem("key");
    
  • 设置 localStorage 项 setItem(‘key’, value)

    localStorage.setItem("key", value);
    
  • 删除 localStorage 项 removeItem(‘key’)

    localStorage.removeItem("key");
    
  • 移除所有 localStorage 项 clear()

    localStorage.clear();
    
  • sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

    var storage = window.localStorage;
    for (var i=0, len=storage.length; i<len; i++){
        var key = storage.key(i);     
        var value = storage.getItem(key);     
        console.log(key + "=" + value); 
    }
    

cookie

cookie几个属性:

  • Expires
    指cookie过期的绝对时间,值为日期对象
    expires默认为设置的expires的当前时间

  • Max-Age
    max-age是cookie的有效期,是一个相对时间,值的单位是秒,是相对于cookie创建后多少秒才过期。
    max-age为正数,则表示该cookie会在max-age秒之后自动失效。写到对应的cookie文件中,无论客户关闭了浏览器还是电脑,只要还在max-age秒之前,登录网站时该cookie仍然有效。
    max-age为负数,则表示该cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效,关闭窗口后该cookie即失效。不会被写到cookie文件中。cookie默认的max-age值为-1。
    max-age为0,则表示删除该cookie。cookie机制没有提供删除cookie的方法,因此通过设置该cookie即时失效实现删除cookie的效果。失效的Cookie会被浏览器从cookie文件或者内存中删除。

  • domain
    domain指定了哪些主机可以接受Cookie,如果没有设置则为当前主机的域(不包含子域名)。如果指定了Domain,则一般包含子域名。

  • path
    path是指cookie存储的目录,默认为当前文件的存储目录。

  • secure
    布尔值。指定该cookie只能通过https协议进行传输。

  • HttpOnly
    使 JavaScript 的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie

注意点:

  • 如果不设置expires或者max-age这个cookie默认是Session的,也就是关闭浏览器该cookie就消失了。

  • 如果max-age和expires都存在,则max-age的优先级更高。

  • 一个 cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

  • 保存中文cookie,则需要对中文进行UTF-8编解码,即通过encodeUriComponent()和decodeUriComponent()方。

  • cookie的更新,只要将key;path;domain一致,则可以通过改变key对应的value来更新cookie的值。

  • cookie只能更新不能删除,如果想要删除一个cookie,则通过更新设置该cookie的max-age=0即可。

  • 设置了不同域名下的cookie是不能互相访问,但是子域名是可以访问上级域名的,所以可以将cookie存在顶级域名下。

前端获取cookie:

// 只能获取非HttpOnly标记的Cookie。
document.cookie

设置cookie:

document.cookie = 'atoken=aaa;max-age=10000;domain=test.com;path=/;secure'

原生cookie的操作比较麻烦,我们可以使用js-cookie库来操作:参考

你可能感兴趣的:(框架与插件)