Javascript 设置本地存储值

在web开发过程中，为了保持用户的数据，我们需要一种方式能够将用户的数据存储在本地。Javascript提供了一种方式，即本地存储(Local Storage)。本地存储可以持续保存数据并在用户充值页面或关闭浏览器后仍然可以保留数据。在本文中，我们将介绍如何在Javascript中设置本地存储值。

1. 什么是本地存储

本地存储就是将数据存储在浏览器本地的一种方式。本地存储有两种类型：localStorage和sessionStorage。

1.1 localStorage

localStorage是HTML5提供的一种本地存储方式，它可以将数据存储在浏览器中，并在之后的会话中继续使用。与cookie相比，localStorage更加强大，因为它可以存储更多的数据，并且不需要令牌(token)进行验证。

localStorage是经过编码的键值对(Key-Value)类型。它可以通过调用setItem()和getItem()方法来设置和获取值。

1.2 sessionStorage

sessionStorage与localStorage非常相似，它也是HTML5提供的一种本地存储方式。它的主要区别是数据仅在会话期间可用。即当用户关闭浏览器窗口或选项卡时，会话将被销毁，并且存储在sessionStorage中的数据也将被删除。

2. 如何设置本地存储值

在Javascript中，要设置本地存储值，你可以使用setItem()方法。这个方法接受两个参数：键和值，它们都必须是字符串类型。例如：

localStorage.setItem('username', 'John');

上述代码会在localStorage中设置一个键名为"username"的值为"John"的键值对。

如果要从localStorage中获取该值，你可以使用getItem()方法：

const username = localStorage.getItem('username');

上述代码将返回"John"。

如果要删除该值，你可以使用removeItem()方法：

localStorage.removeItem('username');

3. 如何检查本地存储是否可用

在某些情况下，当localStorage不可用时，需要使用另一种方式存储用户数据。因此，在使用localStorage之前，你需要先检查localStorage是否可用。你可以使用下面的代码来检查：

if (typeof localStorage === 'undefined') {
  console.log('localStorage is not available');
} else {
  console.log('localStorage is available');
}

4. 小结

在本文中，我们介绍了本地存储以及如何在Javascript中设置本地存储值。我们还讨论了如何检查本地存储是否可用。LocalStorage是一种强大的本地存储方式，它可以持续保存数据，以便在用户重新加载页面或关闭浏览器后继续使用。如果你还没有尝试过LocalStorage，请在你的下一个项目中使用它，你会发现它非常好用。