zoukankan      html  css  js  c++  java
  • cookies,sessionStorage 和 localStorage 的区别

    HTML5 提供了两种在客户端存储数据的新方法:

    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

    在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

    对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

    HTML5 使用 JavaScript 来存储和访问数据。

     sessionStorage 、localStorage 和 cookie 之间的区别

    共同点:都是保存在浏览器端,且同源的。

     区别:

      cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

      数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

      作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

    特性CookielocalStoragesessionStorage
    数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器后被清除
    存放数据大小 4K左右 一般为5MB 一般为5MB
    与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 仅在客户端(即浏览器)中保存,不参与和服务器的通信
    易用性 需要程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

    三者的实用场景

      因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了~

      而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

    简单叙述异同点

    相同点:都存储在客户端
    不同点:

    1.存储大小

    • cookie数据大小不能超过4k。
    • sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。 

    2.有效时间

    • localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
    • sessionStorage  数据在当前浏览器窗口关闭后自动删除。
    • cookie          设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

    3. 数据与服务器之间的交互方式

    • cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
    • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

     注意:

    sessioncookie是否存在关系,说明情况

           1.首先http是无状态协议,是不会保存数据的

           2.cookie和session弥补了http的不足,cookie的数据保存在客户端,session的数据保存在服务器端

           3.cookie和session存在关系,session的id保存在cookie,每次发送请求都会通过cookie的sessionid传递到服务器

    参考:详说 Cookie, LocalStorage 与 SessionStorage

       HTML 5 Web 存储

        请描述一下 cookies,sessionStorage 和 localStorage 的区别?

  • 相关阅读:
    webpack loader和插件的编写原理
    vue和react原理性知识点
    详谈Javascript类与继承
    vue项目中要实现展示markdown文件[转载]
    前端知识总结--2 js部分
    前端知识总结--html
    react相关知识点总结
    优秀文章
    项目部署服务器2
    项目部署服务器
  • 原文地址:https://www.cnblogs.com/guorange/p/7155304.html
Copyright © 2011-2022 走看看