前言

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

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

除了Cookie，還有其他數(shù)據(jù)存儲(chǔ)方式可供使用，例如Web Storage和IndexedDB。Web Storage是HTML5中引入的一種簡單存儲(chǔ)方案，可以在用戶瀏覽器中存儲(chǔ)鍵值對(duì)。IndexedDB是一種更復(fù)雜和功能更強(qiáng)大的瀏覽器數(shù)據(jù)庫，可以用于存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)。這些數(shù)據(jù)存儲(chǔ)方式可以提供更大的存儲(chǔ)容量和更靈活的數(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 })
    }
  }
}

緩存與存儲(chǔ)管理

Cache

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

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

開發(fā)人員可以根據(jù)實(shí)際需求，控制網(wǎng)頁緩存的過期時(shí)間和驗(yàn)證方式，以確保用戶能夠獲得最新的網(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時(shí)同時(shí)清除rom和ram中的緩存，設(shè)置為false時(shí)只清除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瀏覽器中用于存儲(chǔ)和檢索數(shù)據(jù)的機(jī)制。它包含兩種不同的存儲(chǔ)類型：Session Storage和Local Storage。

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

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

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

使用Dom Storage，開發(fā)人員可以輕松地在瀏覽器中存儲(chǔ)和獲取數(shù)據(jù)，而無需使用服務(wù)器端的數(shù)據(jù)庫或其他存儲(chǔ)機(jī)制。這使得網(wǎng)頁能夠在離線狀態(tài)下運(yùn)行，并且可以更快地加載和呈現(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ā)實(shí)戰(zhàn)-Web組件中的Cookie及數(shù)據(jù)存儲(chǔ)的文章就介紹到這了,更多相關(guān)鴻蒙HarmonyO中的Cookie及數(shù)據(jù)存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論