ホームページ > ウェブフロントエンド > uni-app > uniappでデータをキャッシュする方法

uniappでデータをキャッシュする方法

WBOY
リリース: 2023-07-04 23:19:35
オリジナル
7194 人が閲覧しました

UniApp は、Vue.js に基づくクロスプラットフォーム開発フレームワークであり、iOS、Android、Web などの複数のプラットフォームに公開できます。開発プロセスにおいて、データ キャッシュは非常に重要なリンクです。この記事では、UniApp でデータをキャッシュする方法を紹介し、対応するコード例を添付します。

UniApp でのデータ キャッシュには、ローカル ストレージとグローバル変数という 2 つの主な方法があります。

1. ローカル ストレージ
ローカル ストレージは、ユーザーがアプリケーションを再度開いたときにデータを復元できるように、クライアントのローカル ストレージ領域にデータを保存します。 UniApp は、ローカル ストレージ用に uni.setStorageSync と uni.getStorageSync という 2 つの API を提供します。

  1. uni.setStorageSync
    uni.setStorageSync は、データをローカル ストレージに保存するために使用されます。キーとデータという 2 つのパラメータを受け入れます。このうち、keyはデータのキー名、dataはデータの値です。サンプル コードは次のとおりです。
uni.setStorageSync('username', 'Tom');
ログイン後にコピー
  1. uni.getStorageSync
    uni.getStorageSync は、ローカル ストレージからデータを取得するために使用されます。これは、取得するデータのキー名を表す key という 1 つのパラメーターを受け入れます。サンプル コードは次のとおりです。
var username = uni.getStorageSync('username');
console.log(username); // 输出:Tom
ログイン後にコピー

2. グローバル変数
グローバル変数とは、アプリケーション内で宣言され、複数のページで共有できる変数を指します。 UniApp では、キャッシュする必要があるデータをグローバル変数に保存して、複数のページでこのデータを共有できます。サンプル コードは次のとおりです。

  1. App.vue でグローバル変数を宣言する
export default {
  globalData: {
    username: 'Tom'
  },
  onLaunch() {
    // ...
  }
}
ログイン後にコピー
  1. 他のページでグローバル変数を使用する
var app = getApp();
console.log(app.globalData.username); // 输出:Tom
ログイン後にコピー

グローバル変数を使用する場合は、最初に App インスタンスを取得し、その globalData プロパティにアクセスする必要があることに注意してください。

要約すると、この記事では、UniApp でのデータ キャッシュの 2 つの方法、ローカル ストレージとグローバル変数を紹介します。これら 2 つの方法により、アプリケーションにデータを簡単に保存および取得できます。この記事が UniApp 開発におけるデータ キャッシュに役立つことを願っています。

参考資料:

  1. UniApp公式ドキュメント-[データキャッシュ](https://uniapp.dcloud.io/api/storage/storage)
  2. UniApp公式ドキュメント - [グローバル変数](https://uniapp.dcloud.io/frame?id=グローバル変数)

以上がuniappでデータをキャッシュする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート