浏览器本地存储

一、浏览器本地存储方式及使用场景

1.Cookie
  • 概念:Cookie是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,Cookie就出现了。Cookie的大小只有4kb,它是一种纯文本文件,每次发起HTTP请求都会携带Cookie。

    创新互联建站自2013年创立以来,是专业互联网技术服务公司,拥有项目成都网站建设、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元淮安做网站,已为上家服务,为淮安各地企业和个人服务,联系电话:13518219792

  • 特性:

    • Cookie一旦创建成功,名称就无法修改
    • Cookie是无法跨域名的,也就是说a域名和b域名下的cookie是无法共享的,这也是由Cookie的隐私安全性决定的,这样就能够阻止非法获取其他网站的Cookie
    • 每个域名下Cookie的数量不能超过20个,每个Cookie的大小不能超过4kb
    • 有安全问题,如果Cookie被拦截了,那就可获得session的所有信息,即使加密也于事无补,无需知道cookie的意义,只要转发cookie就能达到目的
    • Cookie在请求一个新的页面的时候都会被发送过去
  • 使用场景:

    • 最常见的使用场景就是Cookie和session结合使用,我们将sessionId存储到Cookie中,每次发请求都会携带这个sessionId,这样服务端就知道是谁发起的请求,从而响应相应的信息。(cookie与session都可用于身份认证)
    • 可以用来统计页面的点击次数
  • Cookie的字段及作用:

    • 服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间,domain 是域名、path是路径,domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输,HttpOnly 规定了这个 cookie 只能被服务器访问,不能使用 js 脚本访问

    • Name:cookie的名称

    • Value:cookie的值,对于认证cookie,value值包括web服务器所提供的访问令牌

    • Size: cookie的大小

    • Path:可以访问此cookie的页面路径。 比如domain是abc.com,path是/test,那么只有/test路径下的页面可以读取此cookie。

    • Secure: 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议,可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别,即在HTTPS的连接建立阶段,浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因(比如有些网站使用自签署的证书)在检测到SSL证书无效时,浏览器并不会立即终止用户的连接请求,而是显示安全风险信息,用户仍可以选择继续访问该站点

    • Domain:可以访问该cookie的域名,Cookie 机制并未遵循严格的同源策略,允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时,Cookie 的上述特性非常有用,然而也增加了 Cookie受攻击的危险,比如攻击者可以借此发动会话定置攻击。因而,浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名,以减小攻击发生的范围

    • HTTP: 该字段包含HTTPOnly 属性 ,该属性用来设置cookie能否通过脚本来访问,默认为空,即可以通过脚本访问。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的,这种类型的cookie只能通过服务端来设置。该属性用于防止客户端脚本通过document.cookie属性访问Cookie,有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是,HTTPOnly的应用仍存在局限性,一些浏览器可以阻止客户端脚本对Cookie的读操作,但允许写操作;此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头

    • Expires/Max-size : 此cookie的超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效

2.LocalStorage
  • 概念:LocalStorage是HTML5新引入的特性,由于有的时候我们存储的信息较大,Cookie就不能满足我们的需求,这时候LocalStorage就派上用场了。永久存储,不会随着刷新页面或者关闭页面而消失。

  • 优点:

    • 在大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息
    • LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在
    • 仅储存在本地,不像Cookie那样每次HTTP请求都会被携带
  • 缺点:

    • 存在浏览器兼容问题,IE8以下版本的浏览器不支持
    • 如果浏览器设置为隐私模式,那我们将无法读取到LocalStorage
    • LocalStorage受到同源策略的限制,即端口、协议、主机地址有任何一个不相同,都不会访问
  • 使用场景:

    • 有些网站有换肤的功能,这时候就可以将换肤的信息存储在本地的LocalStorage中,当需要换肤的时候,直接操作LocalStorage即可
    • 在网站中的用户浏览信息也会存储在LocalStorage中,还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中
  • 常用API

    // 保存数据到localStorage
    localStorage.setItem('key', 'value')
    // 从localStorage中获取数据
    localStorage.getItem('key')
    // 从localStorage中删除某一数据
    localStorage.removeItem('key')
    // 从localStorage删除所有数据
    localStorage.clear()
    
3.SessionStorage
  • 概念:SessionStorage和LocalStorage都是在HTML5才提出来的存储方案,SessionStorage 主要用于临时保存同一窗口(或标签页)的数据,刷新页面时不会删除,关闭窗口或标签页之后将会删除这些数据。

  • 与LocalStorage对比:

    • SessionStorage和LocalStorage都在本地进行数据存储
    • SessionStorage也有同源策略的限制,但是SessionStorage有一条更加严格的限制,SessionStorage只有在同一浏览器的同一窗口下才能够共享
    • LocalStorage和SessionStorage都不能被爬虫爬取
  • 使用场景:

    • 由于SessionStorage具有时效性,所以可以用来存储一些网站的游客登录的信息,还有临时的浏览记录的信息。当关闭网站之后,这些信息也就随之消除了
  • 常用API

    // 保存数据到sessionStorage
    sessionStorage.setItem('key', 'value')
    // 从sessionStorage中获取数据
    sessionStorage.getItem('key')
    // 从sessionStorage中删除某一数据
    sessionStorage.removeItem('key')
    // 从sessionStorage删除所有数据
    sessionStorage.clear()
    

本文题目:浏览器本地存储
文章起源:http://scyanting.com/article/dsojies.html