localStorage与sessionStorage的区别

在之前的面试当中经常会被问到localStorage与sessionStorage的区别。通常我的回答都比较简单和我对它的理解一样:localStorage是永久存储,除非手动清除,否则会一直保存在浏览器中。而sessionStorage则是在页面关闭的时候清空。

上面的回答确实是比较简单的回答,但是大致理解上倒是没什么问题,下面来详细了解下两者之间的区别:

使用上:

        在localStorage和sessionStorage使用上,基本一样,通常我们最简单的用法就是将这两个对象当作普通对象一样使用,存储方式为键值对,将我们需要存储的数据通过对象属性扩展的方式,在这两个对象上面添加属性。例如:

//存储一个名为pageData的数据值为“gyuvcuysvudvbchsh”
localStorage.pageData = "gyuvcuysvudvbchsh";

//获取保存在本地的名为pageData的数据
console.log(localStorage.pageData);

//sessionStorage的存储与获取方式和localStorage一致

注:目前localStorage与sessionStorage只能存储字符串,当我们想要向里面存入对象的时候,会自动被装换成字符串。当然,假如我们想要存储对象格式数据,我们可以先将我们想要存储的数据转换为字符串形式,当我们需要从本地获取使用的时候,再将字符串还原成对象格式。

区别:

  1,localStorage存储的数据是永久性的,除非手动清除,如:removeItem()和clear()方法,再就是在浏览器控制台手动删除。

    sessionStorage存储的时间为浏览器标签页打开到关闭间的时间,当标签页或者窗口关闭的时候(这里指的是当前便签被关闭,如果通过location跳转到了另外一个页面,这个时候,sessionStorage数据并不会对清除)会清空sessionStorage数据。

  2,localStorage存储的数据在同源的文档间,只要页面之间是同源的就可以共享localStorage存储的数据,而且可以修改覆盖localStorage数据。

    sessionStorage存储的数据也是限制在同源中的,但是同时也限制在当前的标签页中,同一个页面分别在不同的两个标签中打开的时候,它们都有各自的sessionStorage数据,无法共享,也不能修改其他标签页里面的sessionStorage数据。

原文地址:https://www.cnblogs.com/huangzhenghaoBKY/p/10077108.html