vue本地存储插件_用于本地存储的Vue插件

vue本地存储插件

语言 (vue-ls)

Vue plugin for work with local storage, session storage and memory storage from Vue context.

Vue插件可用于Vue上下文中的本地存储，会话存储和内存存储。

View Documentation 查看文档 Download Source 下载源

jsFiddle示例 (jsFiddle Example)

Vue 1.x

Vue 1.x

Vue 2.x

Vue 2.x

安装 (Install)

CDN (CDN)

Recommended: https://unpkg.com/vue-ls, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-ls/

推荐： https : //unpkg.com/vue-ls ，它将在发布到npm时立即反映最新版本。 您也可以在https://unpkg.com/vue-ls/浏览npm软件包的源代码。

Also available on jsDelivr or cdnjs, but these two services take some time to sync so the latest release may not be available yet.

也可在jsDelivr或cdnjs上使用 ，但是这两项服务需要花费一些时间才能同步，因此最新版本可能尚不可用。

NPM (NPM)

npm install vue-ls --save

纱 (Yarn)

yarn add vue-ls

凉亭 (Bower)

bower install vue-ls --save

开发设置 (Development Setup)

# install dependencies
npm install

# build dist files
npm run build

用法 (Usage)

Vue storage API.

Vue存储API。

import Storage from 'vue-ls';

options = {
  namespace: 'vuejs__', // key prefix
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};

Vue.use(Storage, options);

//or
//Vue.use(Storage);

new Vue({
    el: '#app',
    mounted: function() {
        Vue.ls.set('foo', 'boo');
        //Set expire for item
        Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
        Vue.ls.get('foo');
        Vue.ls.get('boo', 10); //if not set boo returned default 10
        
        let callback = (val, oldVal, uri) => {
          console.log('localStorage change', val);
        } 
        
        Vue.ls.on('foo', callback) //watch change foo key and triggered callback
        Vue.ls.off('foo', callback) //unwatch
        
        Vue.ls.remove('foo');
    }
});

全球 (Global)

• Vue.ls

  Vue.ls

语境 (Context)

• this.$ls

  this.$ls

API (API)

Vue.ls.get(name, def) (Vue.ls.get(name, def))

Returns value under name in storage. Internally parses the value from JSON before returning it.

返回name在存储中的值。 返回值之前，内部解析JSON中的值。

• def: default null, returned if not set name.

  def ：默认为null，如果未设置name ，则返回。

Vue.ls.set(name, value, expire) (Vue.ls.set(name, value, expire))

Persists value under name in storage. Internally converts the value to JSON.

持久存储name中的value 。 在内部将value转换为JSON。

• expire: default null, life time in milliseconds name

  expire ：默认为空，续航时间以毫秒为单位name

Vue.ls.remove(name) (Vue.ls.remove(name))

Removes name from storage. Returns true if the property was successfully deleted, and false otherwise.

从存储中删除name 。 如果属性已成功删除，则返回true ，否则返回false 。

Vue.ls.clear() (Vue.ls.clear())

Clears storage.

清除存储空间。

Vue.ls.on(name, callback) (Vue.ls.on(name, callback))

Listen for changes persisted against name on other tabs. Triggers callback when a change occurs, passing the following arguments.

在其他选项卡上侦听更改是否与name保持一致。 发生更改时触发callback ，并传递以下参数。

• newValue: the current value for name in storage, parsed from the persisted JSON

  newValue ：存储的name的当前值，从持久化的JSON解析

• oldValue: the old value for name in storage, parsed from the persisted JSON

  oldValue ：存储的name的旧值，从持久化的JSON解析

• url: the url for the tab where the modification came from

  url ：修改来自的选项卡的URL

Vue.ls.off(name, callback) (Vue.ls.off(name, callback))

Removes a listener previously attached with Vue.ls.on(name, callback).

删除以前与Vue.ls.on(name, callback)的侦听器。

测试中 (Testing)

• npm run test - run unit test

  npm run test -运行单元测试

• npm run test:browserstack - run browser test

  npm run test:browserstack运行浏览器测试

  • npm run test:browserstack:chromenpm run test:browserstack:chrome
  • npm run test:browserstack:ienpm run test:browserstack:ie
  • npm run test:browserstack:edgenpm run test:browserstack:edge
  • npm run test:browserstack:firefoxnpm run test:browserstack:firefox
  • npm run test:browserstack:safarinpm run test:browserstack:safari

• npm run test:chrome - run browser test in chrome

  npm run test:chrome运行浏览器测试

• npm run test:phantomjs - run browser test in phantomjs

  npm run test:phantomjs在phantomjs中运行浏览器测试

Testing Supported By

测试支持

注意 (Note)

Some browsers don't support the storage event, and most of the browsers that do support it will only call it when the storage is changed by a different window. So, open your page up in two windows. Click the links in one window and you will probably see the event in the other.

某些浏览器不支持该存储事件，并且大多数支持该事件的浏览器仅在存储被其他窗口更改时才调用该事件。 因此，在两个窗口中打开您的页面。 单击一个窗口中的链接，您可能会在另一个窗口中看到该事件。

The assumption is that your page will already know all interactions with localStorage in its own window and only needs notification when a different window changes things. This, of course, is a foolish assumption. But.

假定您的页面已经在其自己的窗口中知道与localStorage的所有交互，并且仅当其他窗口更改了内容时才需要通知。 当然，这是一个愚蠢的假设。 但。

翻译自: https://vuejsexamples.com/vue-plugin-for-work-with-local-storage/

vue本地存储插件