前言

Cookie是一種存儲在用戶計算機上的小文本文件，用于在用戶訪問網(wǎng)站時存儲和提取信息。它由網(wǎng)站服務(wù)器發(fā)送到用戶的瀏覽器，并存儲在用戶的計算機上。每當(dāng)用戶訪問該網(wǎng)站時，瀏覽器將發(fā)送該Cookie回服務(wù)器，以用于識別用戶和存儲用戶的首選項和其他信息。

Cookie可以用于跟蹤用戶的行為，例如記錄用戶的瀏覽歷史、購物車內(nèi)容等。它可以存儲用戶的登錄憑據(jù)，以便用戶在下次訪問網(wǎng)站時自動登錄。Cookie還可以用于在會話之間存儲臨時數(shù)據(jù)，例如存儲用戶在網(wǎng)頁表單中輸入的數(shù)據(jù)。

除了Cookie，還有其他數(shù)據(jù)存儲方式可供使用，例如Web Storage和IndexedDB。Web Storage是HTML5中引入的一種簡單存儲方案，可以在用戶瀏覽器中存儲鍵值對。IndexedDB是一種更復(fù)雜和功能更強大的瀏覽器數(shù)據(jù)庫，可以用于存儲結(jié)構(gòu)化數(shù)據(jù)。這些數(shù)據(jù)存儲方式可以提供更大的存儲容量和更靈活的數(shù)據(jù)操作功能，但使用它們可能需要更多的編程工作。

Cookie管理

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State message: string = 'Hello World';
  build() {
    Column() {
      Button('setCookie')
        .onClick(() => {
          try {
            web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Button('getCookie')
        .onClick(() => {
          try {
            let Cookie=web_webview.WebCookieManager.getCookie('https://www.example.com');
            this.message=Cookie.toString()
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Text(this.message)
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

緩存與存儲管理

Cache

網(wǎng)頁緩存是指瀏覽器或代理服務(wù)器在第一次請求某個特定網(wǎng)頁時，將其內(nèi)容存儲在本地的一種機制。當(dāng)再次請求相同的網(wǎng)頁時，瀏覽器或代理服務(wù)器會檢查本地緩存是否存在該網(wǎng)頁的副本，并從緩存中加載網(wǎng)頁內(nèi)容，而不是重新從服務(wù)器下載。這樣可以提高網(wǎng)頁加載速度和減輕服務(wù)器的負載。

網(wǎng)頁緩存有助于提高用戶的瀏覽體驗，因為加載緩存的網(wǎng)頁比從服務(wù)器下載更快。此外，網(wǎng)頁緩存也可以幫助減少網(wǎng)絡(luò)流量，節(jié)省帶寬，降低服務(wù)器的負載壓力。

開發(fā)人員可以根據(jù)實際需求，控制網(wǎng)頁緩存的過期時間和驗證方式，以確保用戶能夠獲得最新的網(wǎng)頁內(nèi)容。

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('removeCache')
        .onClick(() => {
          try {
            // 設(shè)置為true時同時清除rom和ram中的緩存，設(shè)置為false時只清除ram中的緩存
            this.controller.removeCache(true);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

Dom Storage

Dom Storage是一種在Web瀏覽器中用于存儲和檢索數(shù)據(jù)的機制。它包含兩種不同的存儲類型：Session Storage和Local Storage。

Session Storage用于臨時存儲數(shù)據(jù)，其生命周期與瀏覽器會話相關(guān)聯(lián)。當(dāng)用戶關(guān)閉瀏覽器標(biāo)簽或窗口時，Session Storage中的數(shù)據(jù)將被釋放。Session Storage適用于在網(wǎng)頁會話期間保存臨時數(shù)據(jù)。

Local Storage用于持久化存儲數(shù)據(jù)，即數(shù)據(jù)會保留在客戶端，即使用戶關(guān)閉瀏覽器也不會被刪除。Local Storage的數(shù)據(jù)存儲在應(yīng)用目錄下，可以在客戶端之間共享。Local Storage適用于需要長期保存數(shù)據(jù)的場景。

無論是Session Storage還是Local Storage，數(shù)據(jù)都以Key-Value的形式存儲?？梢酝ㄟ^指定鍵來存儲和檢索數(shù)據(jù)。通常在需要在客戶端存儲數(shù)據(jù)的網(wǎng)頁中使用Dom Storage。

使用Dom Storage，開發(fā)人員可以輕松地在瀏覽器中存儲和獲取數(shù)據(jù)，而無需使用服務(wù)器端的數(shù)據(jù)庫或其他存儲機制。這使得網(wǎng)頁能夠在離線狀態(tài)下運行，并且可以更快地加載和呈現(xiàn)數(shù)據(jù)。

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }
  }
}

到此這篇關(guān)于鴻蒙HarmonyO開發(fā)實戰(zhàn)-Web組件中的Cookie及數(shù)據(jù)存儲的文章就介紹到這了,更多相關(guān)鴻蒙HarmonyO中的Cookie及數(shù)據(jù)存儲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論