vue.js 插件_一个用于Web存储的简约Vue.js v2.x插件-CSDN博客

vue.js 插件

Vue Web存储 (Vue Web Storage)

Vue.js v2.x plugin for localStorage and sessionStorage (~1.7kb min+gz)

适用于localStorage和sessionStorage的Vue.js v2.x插件(〜1.7kb min + gz)

特征 (Features)

Choose either localStorage or sessionStorage
选择localStorage或sessionStorage
Prefix all of your stored keys
前缀所有存储的密钥
Auto JSON.stringify and JSON.parse
自动JSON.stringify和JSON.parse
Events for cross tab communication
交叉表通信事件

安装 (Installation)

# npm
npm install vue-web-storage --save

# Yarn
yarn add vue-web-storage

用法 (Usage)

import Vue from 'vue';
import Storage from 'vue-web-storage';  
Vue.use(Storage);

配置(可选) (Configuration (optional))

Vue.use(Storage, {
  prefix: 'your_app_name',// default `app_`
  driver: 'session', // default 'local'
})

方法 (Methods)

All methods takes care of prefix in key name, so you no need to specify key prefix when using them.

所有方法都使用密钥名称中的prefix ，因此在使用它们时无需指定密钥前缀。

`set(key,value)` (`set(key,value)`)

Stores the value under specified key in storage. Convert value to JSON before saving. Returns true on success and false on errors.

将指定key下的value存储在存储器中。保存前将值转换为JSON。成功返回true ，错误返回false 。

Vue.$storage.set('name', 'john')
Vue.$storage.set('isAdmin', true)
Vue.$storage.set('roles', ['admin', 'sub-admin'])
Vue.$storage.set('permission', {id: 2, slug: 'edit_post'})

`get(key)` (`get(key)`)

Retrieves given key value from storage, parse the value from JSON before returning. If parsing failed then returns the actual value get from storage.

从存储中检索给定的key ，在返回之前从JSON解析值。如果解析失败，则从存储中返回实际值。

Vue.$storage.get('name')

`remove(key)` (`remove(key)`)

Removes the key from storage.

从存储中删除key 。

Vue.$storage.remove('name')

`clear(force = false)` (`clear(force = false)`)

Removes all keys from storage. Passing true will clear whole storage without taking prefix into consideration.

从存储中删除所有密钥。传递true将清除整个存储，而无需考虑prefix 。

Vue.$storage.clear()

`keys(withPrefix = false)` (`keys(withPrefix = false)`)

Returns array of keys stored in storage. Passing true will return prefixed key names.

返回存储在存储器中的键数组。传递true将返回带前缀的键名称。

Vue.$storage.keys()

`hasKey(key)` (`hasKey(key)`)

Returns true if key exists in storage regardless of its value.

如果密钥存在于存储中，则不管其值如何，都返回true 。

Vue.$storage.hasKey('name')

`length()` (`length()`)

Returns the number of keys stored in storage.

返回存储在存储器中的密钥数。

Vue.$storage.length()

大事记 (Events)

These are not regular Vue.js events, these events to be used for cross tab communication.
这些不是常规的Vue.js事件，这些事件用于跨选项卡通信。

`on(key,fn)` (`on(key,fn)`)

Attaches a listener method to the given key. You can attach multiple methods on the same key.

将侦听器方法附加到给定的键。您可以在同一个键上附加多个方法。

const onChangeName = (newValue, OldValue, url) => {
  // do something when `name` value gets changed
};
Vue.$storage.on('name', onChangeName);
Vue.$storage.on('name', this.anotherMethod)

`off(key,fn)` (`off(key,fn)`)

Removes specified listener method form the given key.

从给定的键中删除指定的侦听器方法。

Vue.$storage.off('name', this.onChangeName)

`clearEvents(key?)` (`clearEvents(key?)`)

Removes all listeners for the given key otherwise clears the listeners pool when not specified.
删除给定键的所有侦听器，否则在未指定时清除侦听器池。

Vue.$storage.clearEvents('name');
Vue.$storage.clearEvents()

在非模块环境中安装(没有webpack) (Install in non-module environments (without webpack))

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Init the plugin -->
<script>
Vue.use(VueWebStorage)
</script>