localStorageの有効期限を設定する詳細な方法
2022-02-01 13:28:58
localStorageは積極的に削除されることはなく、破棄されることもないことは周知の事実です。では、localStorageの有効期限はどのように設定するのでしょうか?
<script type="text/javascript">
// Wrap the expiration control code
function set(key,value){
var curTime = new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
}
function get(key,exp){
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time>exp) {
console.log('Message has expired');
//alert("Information has expired")
}else{
//console.log("data="+dataObj.data);
//console.log(JSON.parse(dataObj.data));
var dataObjDatatoJson = JSON.parse(dataObj.data)
return dataObjDatatoJson;
}
}
</script>
利用シーン
1. ローカルデータを使用し、ネットワーク伝送を削減する
2. 2. 高遅延、低帯域、弱いネットワーク環境ではできるだけデータを局在化させること
使用方法
<script>
window.onload = function(){
var Ipt = document.getElementById('input1');
var value = '{"name":"和派孔明","Age":"18","address":"Lujiazui Financial City"}';
set('information',value);
Ipt.onclick = function(){
//var dataObjData=get('information',1000);//expired time is 1 second, normally, you click when it has expired
//var dataObjData=get('information',1000*60);//expiration time is 1 minute
//var dataObjData=get('information',1000*60*60);//expired for 1 hour
//var Obj=get('information',1000*60*60*24);//expiration time is 24 hours
var dataObjData=get('information',1000*60*60*24*7);//expiration time is 1 week
console.log(dataObjData || null);
if (dataObjData!="" && dataObjData!=null) {
console.log("Name:"+dataObjData.name);
console.log("Age:"+dataObjData.Age );
console.log("Address:"+dataObjData.Age );
}else{
alert("The information obtained has expired");
}
}
}
</script>
localStorageの期限切れ制御の実行コードの結果が期限切れでないこと
コードの実行により、LocalStorageの有効期限コントロールが切れる
以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。
関連
-
HTML5でWeChatの共有を呼び起こす外部ブラウザ
-
CAPTCHAを生成するHTML5サンプルコード
-
HTML5 canvas の静的スクロール・ポップアップ
-
canvas.toDataURL()エラーの詳細な解決策はすべてこちら
-
HTML5によるアプリケーションキャッシュの実装
-
html5 android compatibility for mobile video (remove play control, full screen)(モバイルビデオ用アンドロイド互換性)。
-
iframe+postMessageを使ったクロスドメインコミュニケーションのサンプルコード
-
キャンバスを使った線形・放射状グラデーションの使用例
-
Html5ベースの音声検索機能
-
Html5キャンバスパーティクルクロック サンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン