Vanilla JavaScript中的本地存储

在Web应用中，我们经常需要存储一些数据，这些数据可能是用户的个人信息、用户的偏好设置、应用程序的配置信息等等。本地存储是一种非常方便的方式，可以帮助我们存储这些数据。在Vanilla JavaScript中，本地存储有两种方式：localStorage和sessionStorage。

localStorage

localStorage是一种持久存储方式，可以在浏览器关闭后依然保存数据。它的API非常简单，只需要使用setItem(key, value)方法保存数据，使用getItem(key)方法获取数据，使用removeItem(key)方法删除数据。

localStorage.setItem("user", "John");
const user = localStorage.getItem("user");
localStorage.removeItem("user");

sessionStorage

sessionStorage是一种会话存储方式，数据只能在当前会话中使用，如果浏览器关闭后再次打开，数据将被删除。sessionStorage的API与localStorage相同，只需要把localStorage改为sessionStorage即可。

sessionStorage.setItem("user", "John");
const user = sessionStorage.getItem("user");
sessionStorage.removeItem("user");

注意事项

• setItem和getItem的参数是字符串类型，如果需要存储对象，需要使用JSON.stringify和JSON.parse进行转换。
• 存储的数据大小有限制，不同浏览器的大小限制不同，一般为5-10MB。
• 不同浏览器的本地存储不共享，即在Chrome中存储的数据不能在Firefox中获取。如果需要共享数据，可以使用服务器端存储或者使用第三方存储服务。
• 本地存储的数据对于用户来说是公开的，因此不应该存储敏感信息，例如用户的密码。

总结

本地存储是一种非常方便的方式，可以帮助我们存储一些数据。在Vanilla JavaScript中，本地存储有localStorage和sessionStorage两种方式。使用时需要注意存储数据大小的限制、不同浏览器的不共享以及不存储敏感信息等问题。