如何在本地存储js中存储和获取单个变量

在Web开发过程中，我们时常需要存储一些数据供后续使用，比如用户的登录状态、用户的偏好设置等等。HTML5为我们提供了本地存储API，可以通过JavaScript来方便地存储和获取这些数据。本文将介绍如何使用localStorage和sessionStorage来存储和获取单个变量。

使用localStorage存储和获取单个变量

localStorage是一种在浏览器中存储键值对的机制，存储在其中的数据可以一直保留到浏览器关闭或者用户手动清除为止。localStorage的API非常简单，如下所示：

存储变量：

localStorage.setItem('myVariable', 'hello world');

这个函数使用了setItem方法，将键名为'myVariable'的变量存储在localStorage中，值为'hello world'。

获取变量：

var myVariable = localStorage.getItem('myVariable');
console.log(myVariable); // 输出'hello world'

这个函数使用了getItem方法，获取了键名为'myVariable'的变量的值，并将其赋值给myVariable变量。我们可以使用console.log输出这个变量的值，结果为'hello world'。

删除变量：

localStorage.removeItem('myVariable');

这个函数使用了removeItem方法，将键名为'myVariable'的变量从localStorage中删除。

使用sessionStorage存储和获取单个变量

sessionStorage和localStorage很相似，它们的区别在于sessionStorage的数据是在当前会话期间存储的。当用户关闭浏览器窗口后，sessionStorage中的数据也会被自动删除。下面是如何使用sessionStorage来存储和获取单个变量。

存储变量：

sessionStorage.setItem('myVariable', 'hello world');

这个函数与localStorage的setItem方法类似，将键名为'myVariable'的变量存储在sessionStorage中，值为'hello world'。

获取变量：

var myVariable = sessionStorage.getItem('myVariable');
console.log(myVariable); // 输出'hello world'

这个函数与localStorage的getItem方法类似，获取了键名为'myVariable'的变量的值，并将其赋值给myVariable变量。

删除变量：

sessionStorage.removeItem('myVariable');

这个函数与localStorage的removeItem方法类似，将键名为'myVariable'的变量从sessionStorage中删除。

结论

localStorage和sessionStorage可以方便地存储和获取单个变量，它们的API很简单，使用起来非常方便。在实际开发中，我们可以通过它们来存储一些需要长期或者临时保存的数据，提高用户体验。