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://opencollective.com/vue-ls" alt="Financial Contributors on Open Collective"><img src="https://opencollective.com/vue-ls/all/badge.svg?label=financial+contributors" /></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://www.npmjs.com/package/vue-ls"><img src="https://img.shields.io/npm/v/vue-ls.svg?style=flat-square"></a>
|
22 | <a href="https://cdnjs.com/libraries/vue-ls"><img src="https://img.shields.io/cdnjs/v/vue-ls.svg"></a>
|
23 | <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>
|
24 |
|
25 | </p>
|
26 |
|
27 | <p align="center">
|
28 | <img src="https://app.saucelabs.com/browser-matrix/Robin_ck.svg">
|
29 |
|
30 | </p>
|
31 |
|
32 | # vue-ls
|
33 |
|
34 | [![Greenkeeper badge](https://badges.greenkeeper.io/RobinCK/vue-ls.svg)](https://greenkeeper.io/)
|
35 |
|
36 | Vue plugin for work with local storage, session storage and memory storage from Vue context
|
37 |
|
38 | [![NPM](https://nodei.co/npm/vue-ls.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-ls/)
|
39 |
|
40 | ## jsFiddle Example
|
41 |
|
42 | [Vue 1.x](https://jsfiddle.net/Robin_ck/Lvb2ah5p/)
|
43 |
|
44 | [Vue 2.x](https://jsfiddle.net/Robin_ck/6x1akv1L/)
|
45 |
|
46 | ## Install
|
47 | #### CDN
|
48 |
|
49 | 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/
|
50 |
|
51 | 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.
|
52 |
|
53 | #### NPM
|
54 |
|
55 | ``` bash
|
56 | npm install vue-ls --save
|
57 | ```
|
58 |
|
59 | #### Yarn
|
60 |
|
61 | ``` bash
|
62 | yarn add vue-ls
|
63 | ```
|
64 |
|
65 | #### Bower
|
66 |
|
67 | ``` bash
|
68 | bower install vue-ls --save
|
69 | ```
|
70 |
|
71 | ## Development Setup
|
72 |
|
73 | ``` bash
|
74 | # install dependencies
|
75 | npm install
|
76 |
|
77 | # build dist files
|
78 | npm run build
|
79 | ```
|
80 |
|
81 | ## Usage
|
82 |
|
83 | Vue storage API.
|
84 |
|
85 | ``` js
|
86 | import Storage from 'vue-ls';
|
87 |
|
88 | options = {
|
89 | namespace: 'vuejs__', // key prefix
|
90 | name: 'ls', // name variable Vue.[ls] or this.[$ls],
|
91 | storage: 'local', // storage name session, local, memory
|
92 | };
|
93 |
|
94 | Vue.use(Storage, options);
|
95 |
|
96 | //or
|
97 | //Vue.use(Storage);
|
98 |
|
99 | new Vue({
|
100 | el: '#app',
|
101 | mounted: function() {
|
102 | Vue.ls.set('foo', 'boo');
|
103 | //Set expire for item
|
104 | Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
|
105 | Vue.ls.get('foo');
|
106 | Vue.ls.get('boo', 10); //if not set boo returned default 10
|
107 |
|
108 | let callback = (val, oldVal, uri) => {
|
109 | console.log('localStorage change', val);
|
110 | }
|
111 |
|
112 | Vue.ls.on('foo', callback) //watch change foo key and triggered callback
|
113 | Vue.ls.off('foo', callback) //unwatch
|
114 |
|
115 | Vue.ls.remove('foo');
|
116 | }
|
117 | });
|
118 | ```
|
119 |
|
120 | #### Global
|
121 |
|
122 | - `Vue.ls`
|
123 |
|
124 | #### Context
|
125 | - `this.$ls`
|
126 |
|
127 | ## API
|
128 |
|
129 | #### `Vue.ls.get(name, def)`
|
130 |
|
131 | Returns value under `name` in storage. Internally parses the value from JSON before returning it.
|
132 |
|
133 | - `def`: default null, returned if not set `name`.
|
134 |
|
135 | #### `Vue.ls.set(name, value, expire)`
|
136 |
|
137 | Persists `value` under `name` in storage. Internally converts the `value` to JSON.
|
138 |
|
139 | - `expire`: default null, life time in milliseconds `name`
|
140 |
|
141 | #### `Vue.ls.remove(name)`
|
142 |
|
143 | Removes `name` from storage. Returns `true` if the property was successfully deleted, and `false` otherwise.
|
144 |
|
145 | #### `Vue.ls.clear()`
|
146 |
|
147 | Clears storage.
|
148 |
|
149 | #### `Vue.ls.on(name, callback)`
|
150 |
|
151 | Listen for changes persisted against `name` on other tabs. Triggers `callback` when a change occurs, passing the following arguments.
|
152 |
|
153 | - `newValue`: the current value for `name` in storage, parsed from the persisted JSON
|
154 | - `oldValue`: the old value for `name` in storage, parsed from the persisted JSON
|
155 | - `url`: the url for the tab where the modification came from
|
156 |
|
157 | #### `Vue.ls.off(name, callback)`
|
158 |
|
159 | Removes a listener previously attached with `Vue.ls.on(name, callback)`.
|
160 |
|
161 | ## Testing
|
162 |
|
163 | - `npm run test` - run unit test
|
164 | - `npm run test:browserstack` - run browser test
|
165 | - `npm run test:browserstack:chrome`
|
166 | - `npm run test:browserstack:ie`
|
167 | - `npm run test:browserstack:edge`
|
168 | - `npm run test:browserstack:firefox`
|
169 | - `npm run test:browserstack:safari`
|
170 | - `npm run test:chrome` - run browser test in chrome
|
171 |
|
172 | Testing Supported By<br>
|
173 | <img width="200" src="https://cdn.rawgit.com/RobinCK/b1435c9cae05437ad9e4c2023aec08e4/raw/4b89e95cd89827935e6e3949d28a4f6ea3e48ee4/browser-stack.svg">
|
174 |
|
175 | ## Note
|
176 | 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.
|
177 |
|
178 | 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.
|
179 |
|
180 | ## Other my Vue JS plugins
|
181 |
|
182 | | Project | Status | Description |
|
183 | |---------|--------|-------------|
|
184 | | [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 |
|
185 | | [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> |
|
186 |
|
187 | ## Contributors
|
188 |
|
189 | ### Code Contributors
|
190 |
|
191 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
192 | <a href="https://github.com/RobinCK/vue-ls/graphs/contributors"><img src="https://opencollective.com/vue-ls/contributors.svg?width=890&button=false" /></a>
|
193 |
|
194 | ### Financial Contributors
|
195 |
|
196 | Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/vue-ls/contribute)]
|
197 |
|
198 | #### Individuals
|
199 |
|
200 | <a href="https://opencollective.com/vue-ls"><img src="https://opencollective.com/vue-ls/individuals.svg?width=890"></a>
|
201 |
|
202 | #### Organizations
|
203 |
|
204 | Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/vue-ls/contribute)]
|
205 |
|
206 | <a href="https://opencollective.com/vue-ls/organization/0/website"><img src="https://opencollective.com/vue-ls/organization/0/avatar.svg"></a>
|
207 | <a href="https://opencollective.com/vue-ls/organization/1/website"><img src="https://opencollective.com/vue-ls/organization/1/avatar.svg"></a>
|
208 | <a href="https://opencollective.com/vue-ls/organization/2/website"><img src="https://opencollective.com/vue-ls/organization/2/avatar.svg"></a>
|
209 | <a href="https://opencollective.com/vue-ls/organization/3/website"><img src="https://opencollective.com/vue-ls/organization/3/avatar.svg"></a>
|
210 | <a href="https://opencollective.com/vue-ls/organization/4/website"><img src="https://opencollective.com/vue-ls/organization/4/avatar.svg"></a>
|
211 | <a href="https://opencollective.com/vue-ls/organization/5/website"><img src="https://opencollective.com/vue-ls/organization/5/avatar.svg"></a>
|
212 | <a href="https://opencollective.com/vue-ls/organization/6/website"><img src="https://opencollective.com/vue-ls/organization/6/avatar.svg"></a>
|
213 | <a href="https://opencollective.com/vue-ls/organization/7/website"><img src="https://opencollective.com/vue-ls/organization/7/avatar.svg"></a>
|
214 | <a href="https://opencollective.com/vue-ls/organization/8/website"><img src="https://opencollective.com/vue-ls/organization/8/avatar.svg"></a>
|
215 | <a href="https://opencollective.com/vue-ls/organization/9/website"><img src="https://opencollective.com/vue-ls/organization/9/avatar.svg"></a>
|
216 |
|
217 | ## License
|
218 | [![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)
|
219 |
|
220 | MIT © [Igor Ognichenko](https://github.com/RobinCK)
|