鴻蒙HarmonyOS實戰-Web元件（Cookie及資料儲存）

蜀道山QAQ發表於2024-05-31
鴻蒙Web元件Cookie

🚀前言

Cookie是一種儲存在使用者計算機上的小文字檔案，用於在使用者訪問網站時儲存和提取資訊。它由網站伺服器傳送到使用者的瀏覽器，並儲存在使用者的計算機上。每當使用者訪問該網站時，瀏覽器將傳送該Cookie回伺服器，以用於識別使用者和儲存使用者的首選項和其他資訊。

Cookie可以用於跟蹤使用者的行為，例如記錄使用者的瀏覽歷史、購物車內容等。它可以儲存使用者的登入憑據，以便使用者在下次訪問網站時自動登入。Cookie還可以用於在會話之間儲存臨時資料，例如儲存使用者在網頁表單中輸入的資料。

除了Cookie，還有其他資料儲存方式可供使用，例如Web Storage和IndexedDB。Web Storage是HTML5中引入的一種簡單儲存方案，可以在使用者瀏覽器中儲存鍵值對。IndexedDB是一種更復雜和功能更強大的瀏覽器資料庫，可以用於儲存結構化資料。這些資料儲存方式可以提供更大的儲存容量和更靈活的資料操作功能，但使用它們可能需要更多的程式設計工作。

🚀一、Cookie及資料儲存

🔎1.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 })
    }
  }
}

image

🔎2.快取與儲存管理

🦋2.1 Cache

網頁快取是指瀏覽器或代理伺服器在第一次請求某個特定網頁時，將其內容儲存在本地的一種機制。當再次請求相同的網頁時，瀏覽器或代理伺服器會檢查本地快取是否存在該網頁的副本，並從快取中載入網頁內容，而不是重新從伺服器下載。這樣可以提高網頁載入速度和減輕伺服器的負載。

網頁快取有助於提高使用者的瀏覽體驗，因為載入快取的網頁比從伺服器下載更快。此外，網頁快取也可以幫助減少網路流量，節省頻寬，降低伺服器的負載壓力。

開發人員可以根據實際需求，控制網頁快取的過期時間和驗證方式，以確保使用者能夠獲得最新的網頁內容。

image

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 {
            // 設定為true時同時清除rom和ram中的快取，設定為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)
    }
  }
}

🦋2.2 Dom Storage

Dom Storage是一種在Web瀏覽器中用於儲存和檢索資料的機制。它包含兩種不同的儲存型別：Session Storage和Local Storage。

Session Storage用於臨時儲存資料，其生命週期與瀏覽器會話相關聯。當使用者關閉瀏覽器標籤或視窗時，Session Storage中的資料將被釋放。Session Storage適用於在網頁會話期間儲存臨時資料。

Local Storage用於持久化儲存資料，即資料會保留在客戶端，即使使用者關閉瀏覽器也不會被刪除。Local Storage的資料儲存在應用目錄下，可以在客戶端之間共享。Local Storage適用於需要長期儲存資料的場景。

無論是Session Storage還是Local Storage，資料都以Key-Value的形式儲存。可以透過指定鍵來儲存和檢索資料。通常在需要在客戶端儲存資料的網頁中使用Dom Storage。

使用Dom Storage，開發人員可以輕鬆地在瀏覽器中儲存和獲取資料，而無需使用伺服器端的資料庫或其他儲存機制。這使得網頁能夠在離線狀態下執行，並且可以更快地載入和呈現資料。

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)
    }
  }
}

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章