使用 localStorage 代替 cookie 的实现方式

在前端开发中，cookie 常用于存储会话数据或用户信息。然而，localStorage 具有更大的存储容量（通常为 5-10MB），并且数据不会随浏览器会话结束而消失，因此在某些情况下，localStorage 是 cookie 的更好替代方案。以下是将项目中 cookie 替换为 localStorage 的详细步骤和示例。

---

使用 localStorage 代替 cookie 实现项目中的数据存储

在某些特殊场景下，可能需要使用 localStorage 来代替 cookie 进行数据存储，本文将详细介绍如何在 RuoYi 项目中将 cookie 替换为 localStorage。具体操作步骤如下：

1. 删除 cookie 相关依赖

首先，在 package.json 中删除 js-cookie 的依赖。

// package.json
{
  // ...
  "dependencies": {
    // 删除这一行
    // "js-cookie": "3.0.1",
  }
  // ...
}

在 main.js、store/modules/app.js、utils/auth.js、login.vue 文件中，删除对 js-cookie 的导入：

// 删除导入
// import Cookies from 'js-cookie';

2. 使用 localStorage.getItem 替换 Cookies.get

在 main.js 中，将使用 Cookies.get 获取配置的代码替换为 localStorage.getItem。

// main.js
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en';
import '@/styles/index.scss'; // global css
import App from './App.vue';
import store from './store';
import router from './router';

Vue.use(Element, {
  size: localStorage.getItem('size') || 'medium' // 设置 Element UI 的默认尺寸
});

3. 修改 utils/auth.js 使用 localStorage 存储 Token

在 utils/auth.js 中，将原本使用 Cookies 存储和获取 Token 的方法替换为 localStorage。

// utils/auth.js
const TokenKey = 'Admin-Token';

/**
 * 获取 Token
 * @returns {string|null} 返回存储的 Token
 */
export function getToken() {
  return localStorage.getItem(TokenKey);
}

/**
 * 设置 Token
 * @param {string} token 要存储的 Token
 */
export function setToken(token) {
  return localStorage.setItem(TokenKey, token);
}

/**
 * 删除 Token
 */
export function removeToken() {
  return localStorage.removeItem(TokenKey);
}

4. 修改 store/modules/app.js 使用 localStorage 管理状态

在 store/modules/app.js 中，将所有使用 Cookies 的地方替换为 localStorage。

// store/modules/app.js
const state = {
  sidebar: {
    opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true,
    withoutAnimation: false,
    hide: false
  },
  device: 'desktop',
  size: localStorage.getItem('size') || 'medium'
};

const mutations = {
  TOGGLE_SIDEBAR: state => {
    if (state.sidebar.hide) {
      return false;
    }
    state.sidebar.opened = !state.sidebar.opened;
    state.sidebar.withoutAnimation = false;
    if (state.sidebar.opened) {
      localStorage.setItem('sidebarStatus', 1);
    } else {
      localStorage.setItem('sidebarStatus', 0);
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    localStorage.setItem('sidebarStatus', 0);
    state.sidebar.opened = false;
    state.sidebar.withoutAnimation = withoutAnimation;
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device;
  },
  SET_SIZE: (state, size) => {
    state.size = size;
    localStorage.setItem('size', size);
  },
  SET_SIDEBAR_HIDE: (state, status) => {
    state.sidebar.hide = status;
  }
};

5. 修改 login.vue 使用 localStorage 存储用户信息

在 login.vue 中，将 Cookies 更换为 localStorage。

// login.vue
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        rememberMe: false
      },
      loading: false,
      redirect: undefined
    };
  },
  methods: {
    getCookie() {
      const username = localStorage.getItem('username');
      const password = localStorage.getItem('password');
      const rememberMe = localStorage.getItem('rememberMe');
      this.loginForm = {
        username: username === null ? this.loginForm.username : username,
        password: password === null ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === null ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            localStorage.setItem('username', this.loginForm.username);
            localStorage.setItem('password', encrypt(this.loginForm.password));
            localStorage.setItem('rememberMe', this.loginForm.rememberMe);
          } else {
            localStorage.removeItem('username');
            localStorage.removeItem('password');
            localStorage.removeItem('rememberMe');
          }
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    }
  },
  mounted() {
    this.getCookie();
  }
};

重要 API 和参数说明

• localStorage.getItem(key): 获取存储在 localStorage 中的值。
• localStorage.setItem(key, value): 将数据存储在 localStorage 中。
• localStorage.removeItem(key): 从 localStorage 中删除指定的键值对。

6. 封装 localStorage 操作工具类

为了简化localStorage的api，我们可以在项目中创建一个工具类，用于封装对 localStorage 的操作，以便统一管理存储和读取数据的逻辑。

// src/utils/storage.js

const storage = {
  // 设置数据到localStorage
  set(key, value) {
    if (typeof value === 'object') {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },

  // 从localStorage中获取数据
  get(key) {
    const value = localStorage.getItem(key);
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  },

  // 删除localStorage中的数据
  remove(key) {
    localStorage.removeItem(key);
  },

  // 清空所有localStorage数据
  clear() {
    localStorage.clear();
  }
};

export default storage;

此工具类提供了 set、get、remove 和 clear 方法，分别用于设置、获取、删除和清除 localStorage 中的数据。

---

7. 在 request 拦截器中使用 localStorage

在 Axios 的请求拦截器中，从 localStorage 获取 token 并将其添加到请求头中。

// src/utils/request.js

import axios from 'axios';
import storage from '@/utils/storage';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
});

service.interceptors.request.use(
  config => {
    const token = storage.get('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      });
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;

• 请求拦截器：在每次请求之前，从 localStorage 中获取 token 并添加到请求头中。

---

总结

通过以上步骤，您已经成功将项目中的 cookie 替换为 localStorage，这样可以避免 cookie 的存储限制，同时也让数据存储更加持久。这个改进对于提升应用的可靠性和用户体验是非常有益的，特别是对于需要存储较大数据或持久化登录状态的场景。