WebStorageとは
HTML5から導入されたブラウザにデータを保有する仕組み。
localStorageとsessionStorageの二つがあり、それぞれ有効期限が異なる。らしい。
| WebStorage | 有効期限 |
|---|---|
| localStorage | 無期限 |
| sessionStorage | ブラウザが閉じられた時 |
書き方
値設定
localStorage.setItem('set_local', this.local);
sessionStorage.setItem('set_session', this.session);
呼び出し
const val_local = localStorage.getItem('set_local');
const val_session = sessionStorage.getItem('set_session');
使ってみる（Vue.js）
<body>
<div id="app">
<p>localStorage：<input type="text" v-model="local" v-on:change="setLocal"></p>
<p>sessionStorage：<input type="text" v-model="session" v-on:change="setSession"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data() {
var val_local = localStorage.getItem('set_local');
var val_session = sessionStorage.getItem('set_session');
return {
local: val_local,
session: val_session,
}
},
methods: {
setLocal: function (event) {
localStorage.setItem('set_local', this.local);
},
setSession: function (event) {
sessionStorage.setItem('set_session', this.session);
}
}
});
</script>
</body>
localのほうはブラウザ閉じても保持されて、sessionのほうは破棄されることを確認。