ぱーくんのサイト別館

ぱーくん plus idea

localStorageでブラウザにデータ保存・削除したりcookieのように有効期限を持たせる方法

 
この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

ブラウザのフォームなど、入力途中のデータを保存しておき、次回それを復元してあげることでユーザのユーザビリティを向上させるといったことをやりたい場合の解決策です。

ブラウザには「ローカルストレージ」という機能があり、「Key - Value」の形でデータをブラウザに保存しておくことができます。

保存しておくデータは、json形式で格納します。

 

 

localStorageへのデータの保存、削除、取得の方法

ローカルストレージへのデータの保存などは、javascriptで行います。

 

データの保存

 

データの削除

で可能です。

 

また、データの取得

で行いますが、以下のように取得後parseしてオブジェクトにしておけば、プロパティ名でアクセスできるので、javascriptの中で使えます。

 

※上記のように取得すれば「 _json.title」などでアクセス可能。(例えば下の図のようにtitleというプロパティをセットした場合)

 

それではサンプルのソースを掲載します。

HTML側のソース(.html)

 

JavaScript側のソース(.js)

 

上記のサンプルのソースを実行した結果

実行した結果は以下のようになります。

ChromeのDevToolsなどのブラウザのデバッグツールで確認できます。

Chromeの場合は、「Application」タブで確認します。

「LocalStorage」に、ドメイン名で「Key – Value」がJson形式で生成されていることが分かりますね。

 

一定時間経過したら削除したい場合(cookieのようなExpiredの実装)

ストレージですから、更新するか削除しないと、どんどん増えていってしまいます。

しかし、LocalStorageには、Cookieのように「有効期限」を設定する仕組みがないので、自前で実装する必要があります。

その場合には、Jsonにtimestampを持たせて、それと現在時刻等との差分を計算して、一定期間以上であれば、削除する方法が使えます。

以下のようなサンプルです。

注意点は、javascriptのtimestampは1970年1月1日0時からの経過ミリ秒で持っていることです。

 

JavaScript側のソース(.js)

このようなJavscriptの関数をload時に呼ぶと、ある一定以上の時間が経っているデータを削除することができます。

この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ぱーくん plus idea , 2019 All Rights Reserved.