【2】LocalStorage 的介绍以及使用场景

一、介绍 🌟 🌟

在当今前端开发的领域里，快速、高效的项目构建工具以及使用最新技术栈是非常关键的。Vite+Vue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。

作为下一代前端构建工具，Vite 在开发中的启动速度和热重载方面具有突出的优势。而Vue3，则以更加简化的API和更高效的响应式系统为开发者带来了更加流畅的开发体验。结合使用Vite和Vue3，你将能够快速搭建稳定、高效的前端项目。

在这个专栏里，我们将通过100+个实战示例，详细介绍Vite+Vue3的各个方面。从项目的创建和配置开始，我们会一步一步地引导你使用Vite搭建项目的基本框架，并深入讲解Vue3的语法和特性。随后，我们将演示如何构建常见的前端组件、路由管理和状态管理，以及与后端API的交互等实际项目开发中常见的场景。

无论你是从零开始学习Vite+Vue3，还是希望进一步提升你的前端开发能力，本专栏都能为你提供实用的知识和实战经验。通过这100+个实战示例的学习，你将能够掌握Vite+Vue3的核心概念和技术，并能够在实际项目中灵活应用。

赶快加入我们吧，开始你的Vite+Vue3项目实战之旅！

localStorage是web浏览器的一种本地存储技术，即使关闭当前页面甚至关闭浏览器它也会一直存储，除非用户去清理。否则会永远存在。所以它也是前端持久化技术的一种。

二、为什么使用localStorage 🌟 🌟

第一方面：使用localStorage的主要原因是为了在浏览器中存储和检索数据。localStorage是一种浏览器提供的存储机制，可以将数据存储在用户的本地浏览器中，以便在后续的会话中进行检索。

第二方面：使用localStorage的好处是它可以提高应用程序的性能和响应速度，因为它可以减少服务器请求的数量。此外，localStorage还可以使应用程序更加可靠和安全，因为它可以在用户关闭浏览器之后仍然保留数据。sessionStorage只要浏览器关闭就没了😜 😜

第三方面：localStorage的储存大小为5M，cookies的4K 😝 😝

这是都有优点啊，但是由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。

三、什么场景下使用 🌟 🌟

一般来说，如果需要在浏览器中存储数据，并且这些数据不需要经常更新，那么就可以使用localStorage。例如，可以在用户首次登录时将用户的偏好设置存储在localStorage中，然后在后续的会话中使用这些设置。

四、localStorage的使用 🌟 🌟

通过window.localStorage来判断用户的浏览器是否支持localStorage。

localStorage使用非常的简便，它提供了setItem、getItem进行储取值。

// 储存
localStorage.setItem('key', 'value')

// 取
localStorage.getItem('key')

// 删
localStorage.removeItem('key')

五、在开发中使用规范 🌟 🌟

一般情况下，如果你需要去存储用户的一些信息，是不建议直接在程序中使用localStorage.setItem/getItem。我们应该把它写在一个工具类中进行管理。在页面中使用的时候去调用工具中的具体方法。这样做的好处在于后期好维护，其次也比较好梳理，而且也比较规范。比如key或者value值需要变化的时候，我们只需要修改工具类就好。

在src/utlis下新建db.ts文件

const CURRENT_TOKEN = 'token'

/**
 * @Description: 获取token
 * @CreationDate 2023-06-16 15:27:03
 */
export const getToken = (): string => {
    // 在这里你还可以处理一些自己的逻辑判断
    return localStorage.getItem(CURRENT_TOKEN) || ''
}

/**
 * @Description: 储存token
 * @CreationDate 2023-06-16 15:27:14
 */
export const setToken = (token: string) => {
    localStorage.setItem(CURRENT_TOKEN, token)
}

/**
 * @Description: 清除token
 * @CreationDate 2023-06-16 15:27:14
 */
export const removeToken = () => {
    localStorage.removeItem(CURRENT_TOKEN)
}

在vue文件中的使用

<script lang="ts">
import {getToken, setToken} from "@/utlis/db";

export default defineComponent({
    setup() {

        onMounted(() => {
            setToken('bh89757')
            const token = getToken()
            console.log('👉👉👉-----------------',token)
            removeToken()
            console.log('👉👉👉-----------------',token)
        })
    }
})
</script>

整体来说，localStorage的使用是沒有任何难度的，但是开发过程中难免会遇到一个意外，如果你遇到localStorage相关比较棘手的问题，可以私信我。

我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇