window.localStorage使用的代码实例

时间: 2024-02-20 15:56:17 浏览: 65

使用vuex存储用户信息到localStorage的实例

1、首先需要装vuex npm install vuex -d 2、新建store文件夹，新建index.js，并引入vue、vuex,代码如下： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: function (state) { if (!state.user) { 在Vue.js应用中，管理全局状态通常采用Vuex这一状态管理库。Vuex提供了一种集中式的存储方式，便于在组件之间共享数据。本实例主要介绍如何利用Vuex来存储用户信息，并将其持久化到浏览器的localStorage中，以便在用户重新访问应用时仍然能保留这些信息。我们需要安装Vuex。在命令行中运行`npm install vuex -d`，这将下载并添加Vuex作为开发依赖项。接下来，创建一个名为`store`的文件夹，并在其中新建`index.js`文件。在这个文件中，我们将导入Vue和Vuex，并注册一个Vuex store。以下为`index.js`的部分代码： ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' // 定义在localStorage中存储用户信息的键名 const store = new Vuex.Store({ state: () => ({ user: null // 初始化user状态为null }), getters: { getStorage: function (state) { if (!state.user) { state.user = JSON.parse(localStorage.getItem(key)) // 如果state.user为空，尝试从localStorage中读取user } return state.user } }, mutations: { $_setStorage (state, value) { state.user = value // 更新state.user localStorage.setItem(key, JSON.stringify(value)) // 将更新后的user保存到localStorage }, $_removeStorage (state) { state.user = null // 清空state.user localStorage.removeItem(key) // 从localStorage中移除user } } }) export default store ``` 在上述代码中，我们定义了一个名为`user`的状态，通过getter方法`getStorage`检查并恢复localStorage中的用户信息。同时，我们创建了两个mutation方法：`$_setStorage`用于设置用户信息，同时将其保存到localStorage；`$_removeStorage`用于清除用户信息，同时也从localStorage中删除。在应用的主文件（通常是`main.js`）中，需要引入刚刚创建的store： ```javascript import store from './store/index' new Vue({ el: '#app', router, store, // 引入store components: { App }, template: '<App/>' }) ``` 当用户成功登录时，可以在登录组件中调用`commit`方法，将用户名提交到store并保存到localStorage： ```javascript this.$message({ message: '登录成功', type: 'success' }) this.$store.commit('$_setStorage', { user: this.loginForm.username }) // 提交user信息 this.$router.push({ name: 'Home' }) // 登录成功后跳转至首页 ``` 如果需要存储其他状态类信息，可以创建新的状态、getter和mutation，按照类似的方式操作。这样，无论用户何时何地重新打开应用，只要localStorage中的信息还在，就能恢复之前的状态。通过Vuex和localStorage的结合，我们可以方便地管理和持久化Vue应用中的用户信息和其他关键状态，提升用户体验。这种方法尤其适用于需要保持用户登录状态或者个性化设置等跨页面共享数据的场景。

`window.localStorage` 可以用于在浏览器中存储数据，以便在页面刷新或关闭后仍然可以访问。以下是一个示例代码，用于将输入框中的值存储到本地存储中，然后在下一次访问页面时将值显示在输入框中： ```html <!DOCTYPE html> <html> <head> <title>Example</title> <script> // 保存数据到本地存储 function saveData() { var inputVal = document.getElementById("input").value; localStorage.setItem("storedData", inputVal); } // 从本地存储中加载数据 function loadData() { var storedData = localStorage.getItem("storedData"); if (storedData) { document.getElementById("input").value = storedData; } } </script> </head> <body onload="loadData()"> <input type="text" id="input"> <button onclick="saveData()">Save</button> </body> </html> ``` 在这个示例中，用户输入的值将存储在 `localStorage` 中，并在下一次访问页面时自动加载。注意，这段代码只是一个示例，实际使用中需要考虑安全性和数据有效期等问题。

阅读全文

window.localStorage使用的代码实例

相关推荐

sessionStorage本地存储数据实例

HTML本地存储实例

export default new Vuex.Store({ modules: { userModule: user, cityModule: city }, plugins: [ createPersistedState({ key: 'HOSPITALITY-ACCOMMODATION-VUEX', storage: window.localStorage 代码解释

Vue使用localStorage存储数据的方法

vue router 组件的高级应用实例代码

js自动保存编辑文档实例源代码

利用localStorage实现对ueditor编辑内容定时保存为草稿

vue 关闭浏览器窗口的时候,清空localStorage的数据示例

如何在Vue中使localStorage具有响应式(思想实验)

JS实现本地存储信息的方法(基于localStorage与userData)

iframe父向子传值实例.rar

基于localStorage实现持久浏览器队列：LocalQueue介绍

Vuex-localState插件教程：利用localStorage持久化状态

java不要JS 查询浏览器localStorage代码

selenium 设置localstorage

怎么封装一个可以全局使用的localStorage

js 中 localStorage 咋用 需要new吗

利用localstorage解决vuex页面刷新数据丢失问题

最新推荐

绑定halcon显示控件，可实现ROI交互，用于机器视觉领域.zip

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

"互动学习：行动中的多样性与论文攻读经历"

点阵式显示屏常见故障诊断方法

名词性从句包括哪些类别？它们各自有哪些引导词？请结合例句详细解释。

Node.js脚本实现WXR文件到Postgres数据库帖子导入

js 中 localStorage 咋用需要new吗