:squirrel: Investigate the live demo
<script src="https://cdn.jsdelivr.net/gh/nicolauns/Vue-RLS@1.1.0/dist/vue-rls.min.js"></script>- This package is not on NPM, use GitHub source only.
window.localStorage cannot be reactive if you use it directly with Vue, example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue-RLS basic example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
localStorage: window.localStorage
},
template: `<center><br>My name is <input v-model="localStorage.name"><br>{{ localStorage.name }}</center>`,
created: function(){
this.localStorage.name = "Jacob";
}
});
</script>
</body>
</html>Code above will not react, even bind to view. So...
// Set initial configs
Vue.use(VueRLS, {
prefix: 'app_',
driver: 'local',
ttl: 1571540807106
});Now you can acess localStorage or sessionStorage with namespace storage in Vue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue-RLS basic example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nicolauns/Vue-RLS@1.1.0/dist/vue-rls.min.js"></script>
<script>
// Set initial configs
Vue.use(VueRLS, {
prefix: 'app_',
driver: 'local',
ttl: 1571540807106
});
new Vue({
el: '#app',
template: `<center><br>My name is <input v-model="storage.name"><br>{{ storage.name }}</center>`
});
</script>
</body>
</html>| Option | Type | Default | Description |
|---|---|---|---|
prefix |
String | app_ |
Variable name prefix |
driver |
String | local |
Driver name, it can be: local, session or memory |
ttl |
Integer | Boolean | false |
Expiration time in milliseconds |
| Method | Parameters | Description |
|---|---|---|
get(name, defaultValue) |
String, Mixed | Search for a variable in storage and returns its value |
set(name, value) |
String, Mixed | Create or assign the value of a variable |
remove(name) |
String | Destroys a variable |
delete(name) |
String | Alias of remove() method |
clear() |
- | Destroys all variables with prefix defined in the settings |
options(options) |
Object | Assign settings |
storage.name = 'Jacob'; // creat a variable in storage
storage.name; // return a variable value from storage
storage.get('name'); // another way to return a variable value from storage
storage.options({ // change drive to sessionStorage
'driver': 'session'
});
storage.set('name', 'Jacob'); // creat a variable in storage
storage.set('last_name', 'Kuuhaku'); // creat another variable in storage
storage.delete('last_name'); // destroy a variable
storage.clear(); // destroy all variable from selected storage in options