1 | <p align="center">
|
2 |
|
3 | <img width="130" alt="vue-ls logo" src="https://cdn.rawgit.com/RobinCK/0ef39abfff9a44061cee5b2c072e892e/raw/e2b95a57825ac9b8e845609ff9fc5fdaae37b55a/logo.svg">
|
4 |
|
5 | </p>
|
6 |
|
7 | <p align="center">
|
8 | <a href="https://github.com/Flet/semistandard"><img src="https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square"></a>
|
9 | <a href="https://github.com/RobinCK/vue-ls"><img src="https://img.shields.io/badge/vuejs-1.x-brightgreen.svg?style=flat-square"></a>
|
10 | <a href="https://github.com/RobinCK/vue-ls"><img src="https://img.shields.io/badge/vuejs-2.x-brightgreen.svg?style=flat-square"></a>
|
11 | <a href="https://travis-ci.org/RobinCK/vue-ls"><img src="https://img.shields.io/travis/RobinCK/vue-ls.svg?style=flat-square"></a>
|
12 | <a href="https://coveralls.io/github/RobinCK/vue-ls?branch=master"><img src="https://img.shields.io/coveralls/RobinCK/vue-ls.svg?style=flat-square"></a>
|
13 | <a href="http://inch-ci.org/github/RobinCK/vue-ls"><img src="https://inch-ci.org/github/RobinCK/vue-ls.svg?branch=master&style=flat-squar"></a>
|
14 | <a href="https://houndci.com"><img src="https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg"></a>
|
15 |
|
16 | </p>
|
17 |
|
18 | <p align="center">
|
19 | <a href="https://www.npmjs.com/package/vue-ls"><img src="https://img.shields.io/npm/dm/vue-ls.svg?style=flat-square"></a>
|
20 | <a href="https://david-dm.org/robinck/vue-ls"><img src="https://img.shields.io/david/RobinCk/vue-ls.svg?style=flat-square"></a>
|
21 | <a href="https://david-dm.org/robinck/vue-ls?type=dev"><img src="https://img.shields.io/david/dev/RobinCk/vue-ls.svg?style=flat-square"></a>
|
22 | <a href="https://www.npmjs.com/package/vue-ls"><img src="https://img.shields.io/npm/v/vue-ls.svg?style=flat-square"></a>
|
23 | <a href="https://cdnjs.com/libraries/vue-ls"><img src="https://img.shields.io/cdnjs/v/vue-ls.svg"></a>
|
24 | <a href="https://github.com/RobinCK/vue-ls/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/vue-ls.svg?style=flat-square"></a>
|
25 |
|
26 | </p>
|
27 |
|
28 | <p align="center">
|
29 | <a href="https://saucelabs.com/beta/builds/1defc2f5e76e4478817fc085438416d3"><img src="https://cdn.rawgit.com/RobinCK/65849005c282a0e59d93b7e8ce05b980/raw/72ec5d77d535103016832f4aa592e93e4b83f9ee/browsers_support.svg"></a>
|
30 |
|
31 | </p>
|
32 |
|
33 | # vue-ls
|
34 |
|
35 | [![Greenkeeper badge](https://badges.greenkeeper.io/RobinCK/vue-ls.svg)](https://greenkeeper.io/)
|
36 |
|
37 | Vue plugin for work with local storage, session storage and memory storage from Vue context
|
38 |
|
39 | [![NPM](https://nodei.co/npm/vue-ls.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-ls/)
|
40 |
|
41 | ## jsFiddle Example
|
42 |
|
43 | [Vue 1.x](https://jsfiddle.net/Robin_ck/Lvb2ah5p/)
|
44 |
|
45 | [Vue 2.x](https://jsfiddle.net/Robin_ck/6x1akv1L/)
|
46 |
|
47 | ## Install
|
48 | #### CDN
|
49 |
|
50 | 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/
|
51 |
|
52 | Also available on <a href="https://cdn.jsdelivr.net/npm/vue-ls@latest">jsDelivr</a> or <a href="https://cdnjs.com/libraries/vue-ls">cdnjs<a/>, but these two services take some time to sync so the latest release may not be available yet.
|
53 |
|
54 | #### NPM
|
55 |
|
56 | ``` bash
|
57 | npm install vue-ls --save
|
58 | ```
|
59 |
|
60 | #### Yarn
|
61 |
|
62 | ``` bash
|
63 | yarn add vue-ls
|
64 | ```
|
65 |
|
66 | #### Bower
|
67 |
|
68 | ``` bash
|
69 | bower install vue-ls --save
|
70 | ```
|
71 |
|
72 | ## Development Setup
|
73 |
|
74 | ``` bash
|
75 | # install dependencies
|
76 | npm install
|
77 |
|
78 | # build dist files
|
79 | npm run build
|
80 | ```
|
81 |
|
82 | ## Usage
|
83 |
|
84 | Vue storage API.
|
85 |
|
86 | ``` js
|
87 | import Storage from 'vue-ls';
|
88 |
|
89 | options = {
|
90 | namespace: 'vuejs__', // key prefix
|
91 | name: 'ls', // name variable Vue.[ls] or this.[$ls],
|
92 | storage: 'local', // storage name session, local, memory
|
93 | };
|
94 |
|
95 | Vue.use(Storage, options);
|
96 |
|
97 | //or
|
98 | //Vue.use(Storage);
|
99 |
|
100 | new Vue({
|
101 | el: '#app',
|
102 | mounted: function() {
|
103 | Vue.ls.set('foo', 'boo');
|
104 | //Set expire for item
|
105 | Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
|
106 | Vue.ls.get('foo');
|
107 | Vue.ls.get('boo', 10); //if not set boo returned default 10
|
108 |
|
109 | let callback = (val, oldVal, uri) => {
|
110 | console.log('localStorage change', val);
|
111 | }
|
112 |
|
113 | Vue.ls.on('foo', callback) //watch change foo key and triggered callback
|
114 | Vue.ls.off('foo', callback) //unwatch
|
115 |
|
116 | Vue.ls.remove('foo');
|
117 | }
|
118 | });
|
119 | ```
|
120 |
|
121 | #### Global
|
122 |
|
123 | - `Vue.ls`
|
124 |
|
125 | #### Context
|
126 | - `this.$ls`
|
127 |
|
128 | ## API
|
129 |
|
130 | #### `Vue.ls.get(name, def)`
|
131 |
|
132 | Returns value under `name` in storage. Internally parses the value from JSON before returning it.
|
133 |
|
134 | - `def`: default null, returned if not set `name`.
|
135 |
|
136 | #### `Vue.ls.set(name, value, expire)`
|
137 |
|
138 | Persists `value` under `name` in storage. Internally converts the `value` to JSON.
|
139 |
|
140 | - `expire`: default null, life time in milliseconds `name`
|
141 |
|
142 | #### `Vue.ls.remove(name)`
|
143 |
|
144 | Removes `name` from storage. Returns `true` if the property was successfully deleted, and `false` otherwise.
|
145 |
|
146 | #### `Vue.ls.clear()`
|
147 |
|
148 | Clears storage.
|
149 |
|
150 | #### `Vue.ls.on(name, callback)`
|
151 |
|
152 | Listen for changes persisted against `name` on other tabs. Triggers `callback` when a change occurs, passing the following arguments.
|
153 |
|
154 | - `newValue`: the current value for `name` in storage, parsed from the persisted JSON
|
155 | - `oldValue`: the old value for `name` in storage, parsed from the persisted JSON
|
156 | - `url`: the url for the tab where the modification came from
|
157 |
|
158 | #### `Vue.ls.off(name, callback)`
|
159 |
|
160 | Removes a listener previously attached with `Vue.ls.on(name, callback)`.
|
161 |
|
162 | ## Testing
|
163 |
|
164 | - `npm run test` - run unit test
|
165 | - `npm run test:browserstack` - run browser test
|
166 | - `npm run test:browserstack:chrome`
|
167 | - `npm run test:browserstack:ie`
|
168 | - `npm run test:browserstack:edge`
|
169 | - `npm run test:browserstack:firefox`
|
170 | - `npm run test:browserstack:safari`
|
171 | - `npm run test:chrome` - run browser test in chrome
|
172 | - `npm run test:phantomjs` - run browser test in phantomjs
|
173 |
|
174 | Testing Supported By<br>
|
175 | <img width="200" src="https://cdn.rawgit.com/RobinCK/b1435c9cae05437ad9e4c2023aec08e4/raw/4b89e95cd89827935e6e3949d28a4f6ea3e48ee4/browser-stack.svg">
|
176 |
|
177 | ## Note
|
178 | 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.
|
179 |
|
180 | 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.
|
181 |
|
182 | ## Other my Vue JS plugins
|
183 |
|
184 | | Project | Status | Description |
|
185 | |---------|--------|-------------|
|
186 | | [vue-gallery](https://github.com/RobinCK/vue-gallery) | ![npm](https://img.shields.io/npm/v/vue-gallery.svg) | VueJS responsive and customizable image and video gallery |
|
187 | | [vue-popper](https://github.com/RobinCK/vue-popper) | ![npm](https://img.shields.io/npm/v/vue-popperjs.svg) | VueJS popover component based on <a href="https://popper.js.org/">popper.js</a> |
|
188 |
|
189 | ## License
|
190 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-ls.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-ls?ref=badge_large)
|
191 |
|
192 | MIT © [Igor Ognichenko](https://github.com/RobinCK)
|