[WeChat ミニプログラム シリーズ: 4] フロントエンドは wx.setStorageSync キャッシュを使用して有効時間を設定します

序文:

簡単に言うと、有効期限をキャッシュで保存し、それをフロントエンドで判定する仕組みで、ログイン状態の有効期限や操作の有効期限などのシナリオにも対応でき、拡張性はかなりのものです。
公式ドキュメント

成し遂げる:

原則: 最初にキャッシュを設定します。キャッシュの値は、現在時刻に有効期間を加えたものです。キャッシュは常にローカルに存在します。有効期限が到来すると、現在時刻とキャッシュされた時刻を比較して判定し、現在時刻がキャッシュされた値より大きい場合に有効期限が切れたことになります。

  1. たとえば、キャッシュの有効期間を 1 日に設定した場合、有効期限が切れると、コンソールに「有効期間が切れました」というメッセージが表示されます。1 秒は 1000 ミリ秒に相当し、86400000 ミリ秒は 1 日です
    let applyTime = wx.getStorageSync("time"); // 获取时间缓存
     // 先判断存不存在此缓存,如果存在
    if(applyTime){
    
    
      // 当前时间大于有效期
        if (new Date().getTime() > applyTime) {
    
    
              // 设置一天有效期新缓存
              wx.setStorageSync("time", new Date().getTime() + 86400000);
             //有效期已过,在这执行某些操作
              console.log('有效期已过') 
            }
    }else{
    
    
     // 如果不存在,直接设置一天有效期新缓存
          wx.setStorageSync("time", new Date().getTime() + 604800000);
    }

  1. また、単純にカプセル化して、キャッシュされた各値に有効な時間を追加することもできます。保存方法と読み取り方法があります。
/**
 * 设置时效缓存
 * key    存储的key值
 * value  存储的value值 (不填则默认为1)
 * time   有效时间,(单位:毫秒,不填则默认一天)
 */
function setStorageSyncSecond(key, value, time) {
    
    
  value = value ? value : 1
  wx.setStorageSync(key, value)
  let t = time ? time : 86400000
  if (t > 0) {
    
     
    wx.setStorageSync(key + 'dtime', t + new Date().getTime())
  } else {
    
    
    wx.removeStorageSync(key)
  }
}

/**
 * 读取时效缓存
 *  key  存储的key值
 * return 返回有值则有效期未过,返回false或者undefined证明有效期过了、或者该值已不存在
 */
function getStorageSyncTime(key){
    
    
  var deadtime = wx.getStorageSync(key + 'dtime')
  if (deadtime) {
    
    
    if (deadtime < new Date().getTime() ) {
    
    
      wx.removeStorageSync(key)
      wx.removeStorageSync(key + 'dtime')
      return false
    }else{
    
    
      return wx.getStorageSync(key)
     }
  }else{
    
    
    return false
  }
}

豆知識:ミニプログラムのキャッシュデータは体験版と正式版で共有されています。

結論:

上記のコードは検証はしていませんが、参考程度にドキュメントに直接書いたものです、主にアイデアですので、間違いがあればご指摘ください。

最近ウィッチャー3をプレイしていますが、15年前のゲームですが、まだまだプレイしやすいですよ~

ここに画像の説明を挿入します

私の Bilibili Space
Gitee 倉庫アドレス:すべての特殊効果のソース コード
その他の記事:
~私をフォローして、よりシンプルなクリエイティブな特殊効果をご覧ください:
テキスト スモーク効果 html+css+js
サラウンド リフレクション ローディング特殊効果 html+css
バブル フローティング背景 特殊効果 html+css
シンプルな時計の特殊効果 html+css+js
サイバーパンク スタイル ボタン html+css
模倣 NetEase Cloud 公式ウェブサイト カルーセル画像 html+css+js
水の波の読み込みアニメーション html+css
ナビゲーション バー スクロール グラデーション効果 html+css+js
本のページめくり html+css
3D 立体写真アルバム html+css
ネオン画板効果 html+css+js
メモ css 属性まとめ (1)
Sass 概要メモ
... 待って、
私のホームページに行って詳細を見てください~

おすすめ

転載: blog.csdn.net/luo1831251387/article/details/127494733