掌握VUE中localStorage的使用

魔王-T

已于 2023-12-06 13:14:21 修改

阅读量746

点赞数 8

分类专栏：前端技术文章标签： vue.js 前端学习

于 2023-12-04 21:55:54 首次发布

本文链接：https://blog.csdn.net/qqq1994_0810/article/details/134790928

版权

前端技术专栏收录该内容

31 篇文章 3 订阅

订阅专栏

文章目录

localStorage是一种Web浏览器提供的本地存储机制，允许开发者在用户浏览器中存储和检索数据。它提供了一种简单的键值对的存储模式，用于在浏览器会话期间持久保存数据。

🍁localStorage的使用

在 Vue.js 中使用 localStorage 是一种常见的方法，用于在浏览器中存储和获取数据。localStorage 是浏览器提供的一种持久化存储机制，可以将数据存储在客户端，即使用户关闭了浏览器，数据仍然可以保留。

以下是在 Vue.js 中使用 localStorage 的基本步骤：

🌿设置数据

在 Vue 组件中，可以使用 localStorage.setItem(key, value) 方法将数据存储到 localStorage 中。例如：

localStorage.setItem(‘username’, ‘John’);
这样就将 ‘John’ 存储到了名为 ‘username’ 的 localStorage 键中。

🌿获取数据

可以使用 localStorage.getItem(key) 方法从 localStorage 中获取存储的数据。例如：

var username = localStorage.getItem(‘username’);
console.log(username); // 输出 ‘John’
这样就可以从名为 ‘username’ 的 localStorage 键中获取存储的值。

🌿更新数据

如果需要更新 localStorage 中的数据，只需重新使用 localStorage.setItem(key, value) 方法进行设置。例如：

localStorage.setItem(‘username’, ‘Jane’);
这样就将名为 ‘username’ 的 localStorage 键的值更新为 ‘Jane’。

🌿删除数据

如果需要从 localStorage 中删除某个键值对，可以使用 localStorage.removeItem(key) 方法。例如：

localStorage.removeItem(‘username’);
这样就会从 localStorage 中删除名为 ‘username’ 的键值对。

需要注意的是，localStorage 只能存储字符串类型的数据。如果需要存储其他类型的数据，可以使用 JSON.stringify() 将数据转换为字符串进行存储，使用 JSON.parse() 将字符串转换为相应的数据类型进行获取。

🍁代码示例

<!DOCTYPE html>
<html>
<head>
    <title>localStorage示例</title>
</head>
<body>
    <h1>localStorage示例</h1>

    <input type="text" id="nameInput" placeholder="输入你的名字">
    <button onclick="saveName()">保存名字</button>

    <div id="nameDisplay"></div>

    <script>
        // 从localStorage获取保存的名字并显示在页面上
        function displayName() {
            let savedName = localStorage.getItem('name');
            if (savedName) {
                document.getElementById('nameDisplay').innerText = '你的名字是: ' + savedName;
            } else {
                document.getElementById('nameDisplay').innerText = '尚未保存名字';
            }
        }

        // 保存名字到localStorage
        function saveName() {
            let nameInput = document.getElementById('nameInput');
            let name = nameInput.value;
            if (name) {
                localStorage.setItem('name', name);
                displayName();
                nameInput.value = '';
            }
        }

        // 页面加载时显示已保存的名字
        displayName();
    </script>
</body>
</html>

这个示例包含了一个简单的HTML页面，其中包含一个文本输入框和一个按钮。通过在输入框中输入名字并点击按钮，名字将保存到localStorage中，然后显示在页面上。

在JavaScript代码部分，定义了两个函数：

displayName() 函数用于从localStorage获取保存的名字并在页面上显示出来。
saveName() 函数用于将输入框中的名字保存到localStorage中，并调用 displayName() 函数来更新页面上显示的名字。
此外，在页面加载时，会调用 displayName() 函数来显示已保存的名字（如果有的话）。

🍁使用场景

LocalStorage在Web开发中有很多实际的应用场景。下面是一些常见的应用场景：

用户偏好设置：可以使用LocalStorage存储用户的偏好设置，比如主题颜色、语言选择等。这样用户在下次访问时，可以自动加载他们之前的偏好设置。
表单数据的存储：当用户在表单中输入数据时，可以将数据存储在LocalStorage中，以防止数据丢失。这样用户在重新加载页面或者刷新页面时，之前输入的数据仍然会保留。
用户登录状态的保存：当用户进行登录操作时，可以将用户的登录状态保存在LocalStorage中。这样用户在浏览站点的其他页面时，仍然可以保持登录状态，而无需每次都重新登录。
本地缓存数据：如果你的应用需要频繁请求一些静态数据，可以将这些数据存储在LocalStorage中，以减少网络请求并提高应用的响应速度。

尽管LocalStorage非常有用，但也有一些需要注意的限制。由于LocalStorage是存储在用户的浏览器中，所以它的存储空间是有限的。不同浏览器的存储空间限制大小不同，通常为5MB到10MB左右。超过这个限制时，可能会导致添加新数据失败。

另外，LocalStorage是域名绑定的，即每个域名下的LocalStorage是相互隔离的。这意味着一个网站无法访问另一个网站的LocalStorage数据。这也是保护用户隐私的一种机制。

🍁总结

LocalStorage是一种在Web浏览器中存储和获取数据的本地存储机制。它可以方便地存储和获取数据，而无需每次都发送请求到服务器。在Web开发中，LocalStorage有很多实际的应用场景，比如存储用户偏好设置、表单数据、登录状态等。但需要注意的是，LocalStorage有存储空间限制，并且是域名绑定的，需要注意数据的隔离和安全性。

🏫博客主页：魔王-T

🥝大鹏一日同风起扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️