前端面试——Web存储

1.比较 cookies,sessionStorage 和 localStorage 的异同?

----------------------------第一种答案-----------------------------------

(1)使用目的

  • cookie:
    • cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
    • cookie数据始终在同源的http请求中携带(即使不需要),即,会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存

(2)生存周期(有效时间)

  • localStorage    持久化存储,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage  数据在当前浏览器窗口关闭后自动删除。

      sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。

  • cookie     设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

(3)存储大小

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

(4)作用域

  • sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
  • localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
  • 另一种说法

        不同浏览器无法共享localStorage或sessionStorage中的信息;相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

------------------------------------------------------第二种答案----------------------------------------------------

相同点:三者都是用于在浏览器端存储缓存数据的方式。其中localStorage和sessionStorage又统称为web storage。

不同点:

(1)存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;而web storage,会将数据保存到本地,不会造成宽带浪费;

(2)数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

(3)数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

(4)作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面。

2. Web Storage与Cookie相比存在的优势?

(1) 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

(2) 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

(3) 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。

(4) 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

3.浏览器本地存储与服务器端存储之间的区别?

数据既可以在浏览器本地存储,也可以在服务器端存储。

(0)原理

  •          浏览器将数据存储在本地有三种方式:localStorage、sessionStorage和cookie。具体关于这三者见第一个问题。
  •           服务器端可以保存用户的持久数据,如数据库和云存储将用户的大量数据保存在服务器端。
  •          服务器端也可以保存用户的临时会话数据。服务器端的session机制,如jsp的 session 对象,数据保存在服务器上。实现上,服务器和浏览器之间仅需传递session id即可,服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效,这个时间就是server端设置的session有效期

(1)获取方式

         浏览器端可以保存一些数据,需要的时候直接从本地获取;服务器端可以保存所有用户的所有数据,但需要的时候浏览器要向服务器请求数据。

(2)开销

        服务器端保存所有的用户的数据,所以服务器端的开销较大,而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。

(3)存储大小

         浏览器端一般只用来存储小数据,而服务器可以存储大数据或小数据。

(4)安全性

          服务器存储数据安全一些,浏览器只适合存储一般数据。

4. 浏览器本地存储数据的好处?

  (1)减少网络流量
    一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
  (2)快速显示数据
     性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
   (3)临时存储
     很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。  

5. sessionStorage和页面JS数据对象的区别?

(1)生存期

  • 页面中一般的 JS对象或数据的生存期是仅在当前页面有效,因此刷新页面或转到另一页面这样的重新加载页面的情况,数据就不存在了。
  • 而sessionStorage 只要同源的同窗口(或tab)中,刷新页面或进入同源的不同页面,数据始终存在。也就是说只要这个浏览器窗口没有关闭,加载新页面或重新加载,数据仍然存在。

猜你喜欢

转载自blog.csdn.net/qq_21428081/article/details/82414386