localStorage和sessionStorage的区别

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」

生命周期

localStorage没有设置过期时间，在自然状态下，它是永生的，即使你关闭了页面或者关闭浏览器，它也会一直存在着；除非你手动去删除掉它，否则它将一直存在着。 sessionStorage没有手动设置过期时间，但是有过期时间，它将和当时的会话共存亡，当页面被关闭之后，会话结束，sessionStorage保存的数据也会被清除掉；不过，如果你不关闭这个浏览器窗口，即使你重新刷新页面或者进入一个同源的页面，数据也不会被清除掉，但是只要关闭了浏览器窗口，绝对被删的连渣都不剩。假如先关掉当前浏览器，再进入原先的页面，这样的话，数据也会被删除的，因为当你关闭浏览器时，就已经停止当前会话了，再打开一个页面，那就是新的会话了。

存储大小

localStorage和sessionStorage的存储大小大概是5M

使用方法

localStorage和sessionStorage存储数据的方式很类似，都是用setItem()方法，只有两个参数：name和value值，两个参数都必须以字符串的方式传进去，name可以直接写，但是value值不是字符串时，可以采用JSON.stringify()方法将它变成字符串。

let a = {
    name: '小明'
}
localStorage.setItem('student', JSON.stringify(a));
sessionStorage.setItem('student', JSON.stringify(a));

localStorage和sessionStorage取值的方式很类似,只有一个参数。可以凭着这个名字找到相应的值，不过此时的值是字符串形式，需要自己转成我们需要的形式。

localStorage.getItem('student');
sessionStorage.getItem('student');

localStorage和sessionStorage删除的方式很类似,只有一个参数。可以凭着这个名字找到相应的值再将它删除。

localStorage.removeItem('student');
sessionStorage.removeItem('student');

也可以使用这个删除掉所有

localStorage.clear();
sessionStorage.clear();

存储位置

localStorage和sessionStorage都是存在客户端里，与服务器没有任何直接联系。

使用场景

1.当有一些数据有多个地方用到，并且用到的频率较高，我们就可以把这些数据存储在这里，不用每次都向服务器请求，减少服务器压力，效率也会更高。