sessionStorage 和 localStorage区别

最新推荐文章于 2024-07-11 11:08:25 发布

原创最新推荐文章于 2024-07-11 11:08:25 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Storage

JavaScript 同时被 2 个专栏收录

66 篇文章

订阅专栏

Web Storage

2 篇文章

订阅专栏

本文深入解析了HTML5中webStorage的功能，包括localStorage和sessionStorage的区别与使用方法，详细介绍了它们的API，如setItem, getItem, removeItem和clear等，并探讨了它们在前端开发中的应用。

1.web Storage

web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

方法	作用
setItem (key, value)	保存数据，以键值对的方式储存信息。
getItem (key)	获取数据，将键值传入，即可获取到对应的value值。
removeItem (key)	删除单个数据，根据键值移除对应的信息。
clear ()	删除所有的数据
key (index)	获取某个索引的key

2.localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。

3.sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage基本的判断和使用方法和localStorage的使用是一样的。

(1) 页面刷新不会消除数据;

(2) 只有在当前页面打开的链接，才可以访sessionStorage的数据;

(3) 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;