Vue.js和Nuxt.js的跨浏览器存储

Vue.js仓库 (Vue.js Warehouse)

A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js.

用于Vue.js和Nuxt.js的跨浏览器存储，具有基于Store.js的插件支持和易扩展性。

This plugin will pick the best available browser storage, and automatically falls back to the first available storage that works.

该插件将选择最佳的浏览器可用存储空间，并自动退回到第一个可用的可用存储空间。

View demo 查看演示 Download Source 下载源

特征 (Features)

• Backed by the great library Store.js

  由出色的Store.js库支持

• Support for multiple Storages (localStorage, cookies, etc.)

  支持多种存储(localStorage，Cookie等)

• Basic key/value storage functionality (get/set/remove/each)

  基本键/值存储功能(获取/设置/删除/每个)

• Easy integration with Vue.js

  与Vue.js轻松集成

• Support for Nuxt.js

  对Nuxt.js的支持

• Get notified with Vuex when the stored values change

  当存储值更改时，通过Vuex通知

为什么使用这个插件 (Why use this plugin)

Some reasons why you could consider to use this plugin:

您可以考虑使用此插件的一些原因：

• Use a fallback Browser storage method in case the user's browser has limitations. Safari in Private mode can deny writing data in localStorage.

  如果用户的浏览器有限制，请使用后备浏览器存储方法。 私有模式下的Safari可以拒绝在localStorage中写入数据。

• Easy extensibility with Plugins. Support for expiring stored values at a given time, declare default values, etc.

  易于扩展的插件 。 支持在给定时间过期存储的值，声明默认值等。

• A consistent API across browsers for a key/value storage functionality.

  跨浏览器的一致API ，用于键/值存储功能。

• Easy definition of alternative Storage methods. For example: you could reuse a Vue Component, that relies on a storage method, in the user's browser (using localStorage) or a mobile app (using NativeScript application-settings module) just by changing the storage method without modifying the internal logic of the component.

  轻松定义替代存储方法 。 例如：您可以通过更改存储方法而不用修改Vue组件的内部逻辑，在用户的浏览器(使用localStorage )或移动应用(使用NativeScript应用程序设置模块)中重用依赖于存储方法的Vue组件。零件。

• Synchronization of stored values changes with Vuex.

  使用Vuex更改存储值的同步 。

安装 (Installation)

This module is distributed via [npm][npm-homepage] which is bundled with [node][node-homepage] and should be installed as one of your project's dependencies:

该模块通过[npm] [npm-homepage]分发，该模块与[node] [node-homepage]捆绑在一起，应作为项目的dependencies之一安装：

npm install --save store vue-warehouse

or

要么

yarn add store vue-warehouse

使用例 (Example of use)

Suppose you want to use localStorage by default and cookies as an alternative in case your user's browser doesn't allow any interaction with localStorage (Safari Private mode). Besides, you want to define defaults values and an expiration date for all the data that is going to be saved.

假设您希望默认使用localStorage并使用cookie作为替代，以防用户的浏览器不允许与localStorage进行任何交互(Safari专用模式)。 此外，您想为将要保存的所有数据定义默认值和到期日期 。

Vue.js的配置 (Configuration for Vue.js)

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'
import VueWarehouseSync from 'vue-warehouse/sync'

import VuexStore from './vuex/store' // vuex store instance
import VueWarehouseStore from 'store' // vue-warehouse store instance

VueWarehouseSync(VuexStore, VueWarehouseStore)

Vue.use(VueWarehouse, {
  store: VueWarehouseStore,
  plugins: [
    require('store/plugins/expire'),   // Expire stored values at a given time
    require('store/plugins/defaults')  // Declare default values
  ],
  storages: [
    require('store/storages/localStorage'),  // localStorage support
    require('store/storages/cookieStorage')  // cookies support
  ]
})

Nuxt.js的配置 (Configuration for Nuxt.js)

{
  modules: [
    ['vue-warehouse/nuxt',
      {
        vuex: true,
        plugins: [
          'store/plugins/expire',
          'store/plugins/defaults'
        ],
        storages: [
          'store/storages/localStorage',
          'store/storages/cookieStorage'
        ]
      }
    ],
  ]
}

API用法 (API Usage)

// Define defaults values
this.$warehouse.defaults({ user: { name: 'John Doe' } })

// Change current user with an expiration date of 2 hours starting from now
const expiration = new Date().getTime() + (3600 * 2000)
this.$warehouse.set('user', { name:'Marie Doe' }, expiration)

// Get current user value
this.$warehouse.get('user')

// Get current user expiration
this.$warehouse.getExpiration('user')

// Remove current user
this.$warehouse.remove('user') // return the default value -> { name: 'John Doe' }

// Clear all keys
this.$warehouse.clearAll()

// Loop over all stored values
this.$warehouse.each(function(value, key) {
	console.log(key, '==', value)
})

威克斯州 (Vuex State)

The last change made to the browser store (localStorage, cookie, etc.) are synced with the Vuex state:

对浏览器存储所做的最后更改(localStorage，Cookie等)已与Vuex状态同步：

// Store current user
this.$warehouse.set('user', { name: 'John Doe' })

// Update the user
this.$warehouse.set('user', { name: 'Marie Doe' })

// get state values
store.state.warehouse.action    // action performed -> set
store.state.warehouse.key       // key affected     -> user
store.state.warehouse.value     // stored value     -> { name: 'Marie Doe' }
store.state.warehouse.oldValue  // last value       -> { name: 'John Doe' }

翻译自: https://vuejsexamples.com/a-cross-browser-storage-for-vue-js-and-nuxt-js/