diff --git a/src/components/Dashboard/RankTable.vue b/src/components/Dashboard/RankTable.vue
index 67f7ea289..67c069b3b 100644
--- a/src/components/Dashboard/RankTable.vue
+++ b/src/components/Dashboard/RankTable.vue
@@ -39,6 +39,7 @@
 <script>
 import Title from './Title.vue'
 import SwitchDate from './SwitchDate.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/components/Dashboard/SwitchDate.vue b/src/components/Dashboard/SwitchDate.vue
index 59f4c2e47..a67416412 100644
--- a/src/components/Dashboard/SwitchDate.vue
+++ b/src/components/Dashboard/SwitchDate.vue
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
+
 export default {
   props: {
     name: {
diff --git a/src/components/Form/AutoDataForm/utils.js b/src/components/Form/AutoDataForm/utils.js
index 6ad4eade4..148fc2fc1 100644
--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -7,6 +7,7 @@ import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot, toSentenceCase } from '@/utils/common/index'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
+import { vueCookie as VueCookie } from '@/utils/storage'
 
 export class FormFieldGenerator {
   constructor() {
@@ -174,7 +175,7 @@ export class FormFieldGenerator {
     const placeholderType = ['input', 'select', 'm2m_related_field']
     const placeholderComponent = [ObjectSelect2]
 
-    const systemLang = document.cookie.django_language
+    const systemLang = VueCookie.get('django_language')
     if (helpTextAsPlaceholder !== undefined) {
       helpTextAsPlaceholder = !!helpTextAsPlaceholder
     } else if (
diff --git a/src/components/Form/FormFields/PhoneInput.vue b/src/components/Form/FormFields/PhoneInput.vue
index cdda97bb4..63622ea7d 100644
--- a/src/components/Form/FormFields/PhoneInput.vue
+++ b/src/components/Form/FormFields/PhoneInput.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'PhoneInput',
diff --git a/src/components/Widgets/Announcement/index.vue b/src/components/Widgets/Announcement/index.vue
index b61aaa986..61a150fd5 100644
--- a/src/components/Widgets/Announcement/index.vue
+++ b/src/components/Widgets/Announcement/index.vue
@@ -52,6 +52,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import MarkDown from '@/components/Widgets/MarkDown'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'Announcement',
diff --git a/src/directive/drawer-drag.js b/src/directive/drawer-drag.js
index d0be9742d..30f93195f 100644
--- a/src/directive/drawer-drag.js
+++ b/src/directive/drawer-drag.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 Vue.directive('el-drawer-drag-width', {
   bind(el, binding, vnode, oldVnode) {
diff --git a/src/guards.js b/src/guards.js
index 9d023ea62..07a7a695c 100644
--- a/src/guards.js
+++ b/src/guards.js
@@ -5,6 +5,7 @@ import { startup } from '@/utils/startup'
 import store from '@/store'
 import { isSameView } from '@/utils/jms/index'
 import { toSentenceCase } from '@/utils/common/index'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 function beforeRouteChange(to, from, next) {
   localStorage.setItem('activeTab', '')
diff --git a/src/i18n/utils.js b/src/i18n/utils.js
index 443b0765f..97413379e 100644
--- a/src/i18n/utils.js
+++ b/src/i18n/utils.js
@@ -1,5 +1,5 @@
-import VueCookie from 'vue-cookie'
 import store from '@/store'
+import { vueCookie as VueCookie } from '@/utils/storage'
 
 export function getLangCode(withInternalCode = false) {
   const cookieLang = VueCookie.get('django_language')
@@ -15,4 +15,3 @@ export function getLangCode(withInternalCode = false) {
   }
   return lang
 }
-
diff --git a/src/layout/components/NavHeader/ViewSwitcher.vue b/src/layout/components/NavHeader/ViewSwitcher.vue
index 0be89ea21..4d56099db 100644
--- a/src/layout/components/NavHeader/ViewSwitcher.vue
+++ b/src/layout/components/NavHeader/ViewSwitcher.vue
@@ -28,6 +28,7 @@
 import { mapGetters } from 'vuex'
 import Icon from '@/components/Widgets/Icon'
 import store from '@/store'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'ViewSwitcher',
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index 726a419bd..7aacf8f4e 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -73,6 +73,7 @@ import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import TagsView from '../TagsView/index.vue'
 import { toSentenceCase } from '@/utils/common/index'
 import IBox from '@/components/Common/IBox/index.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'Page',
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index 8d21ecca9..ed0747d0d 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -57,6 +57,7 @@
 import Page from '../Page/'
 import Icon from '@/components/Widgets/Icon'
 import { toSentenceCase } from '@/utils/common/index'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'TabPage',
diff --git a/src/main.js b/src/main.js
index b047e3961..9fc85b040 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import ElementUI from 'element-ui'
 import locale from 'elementLocale'
 import '@/styles/index.scss' // global css
 import App from './App'
+import { vueCookie as VueCookie } from '@/utils/storage'
 import store from './store'
 import router from './router'
 import i18n, { fetchTranslationsFromAPI } from './i18n/i18n'
@@ -14,8 +15,6 @@ import '@/icons' // icon
 import '@/guards' // permission control
 import '@/directive'
 import '@/filters'
-// cookie
-import VueCookie from 'vue-cookie'
 import VueLogger from 'vuejs-logger'
 import loggerOptions from './utils/logger'
 import ECharts from 'vue-echarts'
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 39e91fbfa..0de2a8962 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie'
+import { jsCookie as Cookies } from '@/utils/storage'
 
 const state = {
   sidebar: {
diff --git a/src/store/modules/assets.js b/src/store/modules/assets.js
index 0e772705f..d3a61a92a 100644
--- a/src/store/modules/assets.js
+++ b/src/store/modules/assets.js
@@ -1,5 +1,6 @@
 import { getCategoryTypes as apiGetCategoryTypes } from '@/api/asset'
 import request from '@/utils/request'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 const state = {
   assetCategories: [],
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 5118795d0..606784314 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -3,6 +3,7 @@ import { getPublicSettings } from '@/api/settings'
 import { changeElementColor, changeThemeColors } from '@/utils/theme/index'
 import { changeMenuColor } from '@/utils/theme/color'
 import request from '@/utils/request'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
 
diff --git a/src/store/modules/table.js b/src/store/modules/table.js
index ec9987088..82835cd94 100644
--- a/src/store/modules/table.js
+++ b/src/store/modules/table.js
@@ -1,3 +1,5 @@
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
+
 function getTableConfigFromLocal() {
   const configs = localStorage.getItem('tableConfig')
   try {
diff --git a/src/utils/common/index.js b/src/utils/common/index.js
index d74e7478a..5a845f93d 100644
--- a/src/utils/common/index.js
+++ b/src/utils/common/index.js
@@ -1,5 +1,6 @@
 import i18n from '@/i18n/i18n'
 import { message } from '@/utils/vue/message'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 const _ = require('lodash')
 
@@ -426,7 +427,7 @@ export function getDrawerWidth() {
 
 export function getShowCurrentAssetValue(cookie, defaultValue = '0') {
   const stored = typeof window !== 'undefined'
-    ? window.localStorage.getItem('show_current_asset')
+    ? localStorage.getItem('show_current_asset')
     : null
   if (stored === '0' || stored === '1') {
     return stored
@@ -439,7 +440,7 @@ export function getShowCurrentAssetValue(cookie, defaultValue = '0') {
 
 export function setShowCurrentAssetValue(cookie, value) {
   if (typeof window !== 'undefined') {
-    window.localStorage.setItem('show_current_asset', String(value))
+    localStorage.setItem('show_current_asset', String(value))
   }
   if (cookie && typeof cookie.set === 'function') {
     cookie.set('show_current_asset', value, 1)
@@ -457,7 +458,7 @@ export class ObjectLocalStorage {
   }
 
   getObject() {
-    const stored = window.localStorage.getItem(this.key)
+    const stored = localStorage.getItem(this.key)
     let value = {}
     try {
       value = JSON.parse(stored)
@@ -491,7 +492,7 @@ export class ObjectLocalStorage {
     }
     const attrSafe = this.b64(attr)
     obj[attrSafe] = value
-    window.localStorage.setItem(this.key, JSON.stringify(obj))
+    localStorage.setItem(this.key, JSON.stringify(obj))
   }
 }
 
diff --git a/src/utils/jms/auth.js b/src/utils/jms/auth.js
index 2a044fc3e..d8580fcfd 100644
--- a/src/utils/jms/auth.js
+++ b/src/utils/jms/auth.js
@@ -1,5 +1,5 @@
-import VueCookie from 'vue-cookie'
 import request from '@/utils/request'
+import { scopedLocalStorage as localStorage, vueCookie as VueCookie } from '@/utils/storage'
 
 const CURRENT_ORG_KEY = 'currentOrg'
 const CURRENT_ROLE_KEY = 'currentRole'
diff --git a/src/utils/jms/index.js b/src/utils/jms/index.js
index 1c5fbd1d6..f81e7b611 100644
--- a/src/utils/jms/index.js
+++ b/src/utils/jms/index.js
@@ -1,5 +1,6 @@
 import { constantRoutes } from '@/router'
 import store from '@/store'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 let openedTaskWindow = null // 保存已打开的窗口对象
 
diff --git a/src/utils/request.js b/src/utils/request.js
index f2710a617..3bef33fd1 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -8,6 +8,7 @@ import { message } from '@/utils/vue/message'
 import store from '@/store'
 import axiosRetry from 'axios-retry'
 import router from '@/router'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 // create an axios instance
 const service = axios.create({
diff --git a/src/utils/secure.js b/src/utils/secure.js
index bdfa1e96a..ac6f31f30 100644
--- a/src/utils/secure.js
+++ b/src/utils/secure.js
@@ -46,7 +46,7 @@ const filter = new xss.FilterXSS(options)
 
 import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
 import CryptoJS from 'crypto-js'
-import VueCookie from 'vue-cookie'
+import { vueCookie as VueCookie } from '@/utils/storage'
 
 export function fillKey(key) {
   const KeyLength = 16
diff --git a/src/utils/startup.js b/src/utils/startup.js
index 5b8a46464..c1cda12a0 100644
--- a/src/utils/startup.js
+++ b/src/utils/startup.js
@@ -6,6 +6,7 @@ import { message } from '@/utils/vue/message'
 import orgUtil from '@/utils/jms/org'
 import orgs from '@/api/orgs'
 import { getPropView, isViewHasOrgs } from '@/utils/jms/index'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 const whiteList = ['/login', process.env.VUE_APP_LOGIN_PATH] // no redirect whitelist
 const autoEnterOrgs = [
diff --git a/src/views/dashboard/Audit/index.vue b/src/views/dashboard/Audit/index.vue
index ef6da1fba..01e595e43 100644
--- a/src/views/dashboard/Audit/index.vue
+++ b/src/views/dashboard/Audit/index.vue
@@ -13,6 +13,7 @@ import { Announcement } from '@/components'
 import { Page } from '@/layout/components'
 import Page403 from '@/views/403'
 import AuditReport from '@/views/reports/audits/Dashboard.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/views/reports/accounts/AccountAutomation.vue b/src/views/reports/accounts/AccountAutomation.vue
index 87f7c0aff..5b3c18937 100644
--- a/src/views/reports/accounts/AccountAutomation.vue
+++ b/src/views/reports/accounts/AccountAutomation.vue
@@ -55,6 +55,7 @@ import * as echarts from 'echarts'
 import Echart from '@/components/Dashboard/Echart.vue'
 import AccountSummary from '@/views/reports/pam/ChangeSecret/AccountSummary.vue'
 import RiskSummary from '@/views/reports/pam/Dashboard/RiskSummary.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/views/reports/assets/AssetActivity.vue b/src/views/reports/assets/AssetActivity.vue
index 5f457118e..c48e1f924 100644
--- a/src/views/reports/assets/AssetActivity.vue
+++ b/src/views/reports/assets/AssetActivity.vue
@@ -85,6 +85,7 @@ import UserAssetActivity from '@/views/reports/console/UserAssetActivity.vue'
 import * as echarts from 'echarts'
 import Echart from '@/components/Dashboard/Echart.vue'
 import { mixColors } from '@/views/reports/const'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/views/reports/audits/Dashboard.vue b/src/views/reports/audits/Dashboard.vue
index fce3ecde5..33f57d399 100644
--- a/src/views/reports/audits/Dashboard.vue
+++ b/src/views/reports/audits/Dashboard.vue
@@ -29,6 +29,7 @@ import CardSummary from './components/CardSummary.vue'
 import RightSummary from './components/RightSummary.vue'
 import BaseReport from '../base/BaseReport.vue'
 import { getRouteUrl } from '@/utils/vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/views/reports/base/RightAction.vue b/src/views/reports/base/RightAction.vue
index 3d31254d8..86f971839 100644
--- a/src/views/reports/base/RightAction.vue
+++ b/src/views/reports/base/RightAction.vue
@@ -25,6 +25,7 @@
 
 <script>
 import { download } from '@/utils/common'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'RightAction',
diff --git a/src/views/reports/pam/ChangeSecret/index.vue b/src/views/reports/pam/ChangeSecret/index.vue
index c03584175..e961e11ff 100644
--- a/src/views/reports/pam/ChangeSecret/index.vue
+++ b/src/views/reports/pam/ChangeSecret/index.vue
@@ -38,6 +38,7 @@ import AccountSummary from './AccountSummary.vue'
 import FailedAccountSummary from './FailedAccountSummary.vue'
 import BaseReport from '../../base/BaseReport.vue'
 import { getRouteUrl } from '@/utils/vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'ChangeSecret',
diff --git a/src/views/reports/users/ChangePassword.vue b/src/views/reports/users/ChangePassword.vue
index 7fa6a99ed..69618f12c 100644
--- a/src/views/reports/users/ChangePassword.vue
+++ b/src/views/reports/users/ChangePassword.vue
@@ -56,6 +56,7 @@ import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import { mixColors } from '@/views/reports/const'
 import * as echarts from 'echarts'
 import Echart from '@/components/Dashboard/Echart.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/views/reports/users/UserActivity.vue b/src/views/reports/users/UserActivity.vue
index 83b74e920..b0ccc113b 100644
--- a/src/views/reports/users/UserActivity.vue
+++ b/src/views/reports/users/UserActivity.vue
@@ -79,6 +79,7 @@ import * as echarts from 'echarts'
 import { mixColors } from '@/views/reports/const'
 import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import Echart from '@/components/Dashboard/Echart.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   components: {
diff --git a/src/views/settings/Msg/MsgTemplate/index.vue b/src/views/settings/Msg/MsgTemplate/index.vue
index 193361cec..01f62ca9c 100644
--- a/src/views/settings/Msg/MsgTemplate/index.vue
+++ b/src/views/settings/Msg/MsgTemplate/index.vue
@@ -22,6 +22,7 @@ import MarkDownEditor from '@/views/settings/Msg/Email/markDownEditor.vue'
 import { Select2 } from '@/components/Form/FormFields'
 import VariablesHelpTextDialog from '@/components/Apps/VariablesHelpTextDialog'
 import variable from '@/views/ops/Template/components/Variable.vue'
+import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
 export default {
   name: 'MsgTemplate',