• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用隐私模式
2
3
4开发者在创建Web组件时，可以将可选参数[incognitoMode](../reference/apis-arkweb/ts-basic-components-web.md#weboptions)设置为true，来开启Web组件的隐私模式。当使用隐私模式时，浏览网页时的Cookie、Cache Data等数据不会保存在本地的持久化文件，当隐私模式的Web组件被销毁时，Cookie、Cache Data等数据将不被记录下来。
5
6
7- 创建隐私模式的[Web组件](../reference/apis-arkweb/ts-basic-components-web.md#web)。
8
9   ```ts
10  // xxx.ets
11  import { webview } from '@kit.ArkWeb';
12
13  @Entry
14  @Component
15  struct WebComponent {
16    controller: webview.WebviewController = new webview.WebviewController();
17
18    build() {
19      Column() {
20        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
21      }
22    }
23  }
24  ```
25
26- 通过[isIncognitoMode](../reference/apis-arkweb/js-apis-webview.md#isincognitomode11) 判断当前Web组件是否是隐私模式。
27
28  ```ts
29  // xxx.ets
30  import { webview } from '@kit.ArkWeb';
31  import { BusinessError } from '@kit.BasicServicesKit';
32
33  @Entry
34  @Component
35  struct WebComponent {
36    controller: webview.WebviewController = new webview.WebviewController();
37
38    build() {
39      Column() {
40        Button('isIncognitoMode')
41          .onClick(() => {
42            try {
43              let result = this.controller.isIncognitoMode();
44              console.log('isIncognitoMode' + result);
45            } catch (error) {
46              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
47            }
48          })
49        Web({ src: 'www.example.com', controller: this.controller })
50      }
51    }
52  }
53  ```
54
55隐私模式提供了一系列接口，用于操作地理位置、Cookie以及Cache Data。
56
57- 通过[allowGeolocation](../reference/apis-arkweb/js-apis-webview.md#allowgeolocation)设置隐私模式下的Web组件允许指定来源使用地理位置。
58
59  ```ts
60  // xxx.ets
61  import { webview } from '@kit.ArkWeb';
62  import { BusinessError } from '@kit.BasicServicesKit';
63
64  @Entry
65  @Component
66  struct WebComponent {
67    controller: webview.WebviewController = new webview.WebviewController();
68    origin: string = "file:///";
69
70    build() {
71      Column() {
72        Button('allowGeolocation')
73          .onClick(() => {
74            try {
75              // allowGeolocation第二个参数表示隐私模式（true）或非隐私模式（false）下，允许指定来源使用地理位置。
76              webview.GeolocationPermissions.allowGeolocation(this.origin, true);
77            } catch (error) {
78              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
79            }
80          })
81        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
82      }
83    }
84  }
85  ```
86
87- 通过[deleteGeolocation](../reference/apis-arkweb/js-apis-webview.md#deletegeolocation)清除隐私模式下指定来源的地理位置权限状态。
88
89  ```ts
90  // xxx.ets
91  import { webview } from '@kit.ArkWeb';
92  import { BusinessError } from '@kit.BasicServicesKit';
93
94  @Entry
95  @Component
96  struct WebComponent {
97    controller: webview.WebviewController = new webview.WebviewController();
98    origin: string = "file:///";
99
100    build() {
101      Column() {
102        Button('deleteGeolocation')
103          .onClick(() => {
104            try {
105              // deleteGeolocation第二个参数表示隐私模式（true）或非隐私模式（false）下，清除指定来源的地理位置权限状态。
106              webview.GeolocationPermissions.deleteGeolocation(this.origin, true);
107            } catch (error) {
108              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
109            }
110          })
111        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
112      }
113    }
114  }
115  ```
116
117- 通过[getAccessibleGeolocation](../reference/apis-arkweb/js-apis-webview.md#getaccessiblegeolocation)以回调方式异步获取隐私模式下指定源的地理位置权限状态。
118
119  ```ts
120  // xxx.ets
121  import { webview } from '@kit.ArkWeb';
122  import { BusinessError } from '@kit.BasicServicesKit';
123
124  @Entry
125  @Component
126  struct WebComponent {
127    controller: webview.WebviewController = new webview.WebviewController();
128    origin: string = "file:///";
129
130    build() {
131      Column() {
132        Button('getAccessibleGeolocation')
133          .onClick(() => {
134            try {
135              // getAccessibleGeolocation第三个参数表示隐私模式（true）或非隐私模式（false）下，以回调方式异步获取指定源的地理位置权限状态。
136              webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
137                if (error) {
138                  console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
139                  return;
140                }
141                console.log('getAccessibleGeolocationAsync result: ' + result);
142              }, true);
143            } catch (error) {
144              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
145            }
146          })
147        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
148      }
149    }
150  }
151  ```
152
153- 通过[deleteAllData](../reference/apis-arkweb/js-apis-webview.md#deletealldata)清除隐私模式下Web SQL当前使用的所有存储。
154
155  ```ts
156  // xxx.ets
157  import { webview } from '@kit.ArkWeb';
158  import { BusinessError } from '@kit.BasicServicesKit';
159
160  @Entry
161  @Component
162  struct WebComponent {
163    controller: webview.WebviewController = new webview.WebviewController();
164
165    build() {
166      Column() {
167        Button('deleteAllData')
168          .onClick(() => {
169            try {
170              // deleteAllData参数表示删除所有隐私模式（true）或非隐私模式（false）下，内存中的web数据。
171              webview.WebStorage.deleteAllData(true);
172            } catch (error) {
173              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
174            }
175          })
176        Web({ src: $rawfile('index.html'), controller: this.controller, incognitoMode: true })
177          .databaseAccess(true)
178      }
179    }
180  }
181  ```
182
183  加载的html文件。
184   ```html
185  <!-- index.html -->
186  <!DOCTYPE html>
187  <html>
188  <head>
189    <meta charset="UTF-8">
190    <title>test</title>
191    <script type="text/javascript">
192
193      var db = openDatabase('mydb','1.0','Test DB',2 * 1024 * 1024);
194      var msg;
195
196      db.transaction(function(tx){
197        tx.executeSql('INSERT INTO LOGS (id,log) VALUES(1,"test1")');
198        tx.executeSql('INSERT INTO LOGS (id,log) VALUES(2,"test2")');
199        msg = '<p>数据表已创建,且插入了两条数据。</p>';
200
201        document.querySelector('#status').innerHTML = msg;
202      });
203
204      db.transaction(function(tx){
205        tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
206          var len = results.rows.length,i;
207          msg = "<p>查询记录条数：" + len + "</p>";
208
209          document.querySelector('#status').innerHTML += msg;
210
211              for(i = 0; i < len; i++){
212                msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
213
214          document.querySelector('#status').innerHTML += msg;
215          }
216        },null);
217      });
218
219      </script>
220  </head>
221  <body>
222  <div id="status" name="status">状态信息</div>
223  </body>
224  </html>
225  ```
226
227- 通过[fetchCookieSync](../reference/apis-arkweb/js-apis-webview.md#fetchcookiesync11)获取隐私模式下指定url对应cookie的值。
228
229  ```ts
230  // xxx.ets
231  import { webview } from '@kit.ArkWeb';
232  import { BusinessError } from '@kit.BasicServicesKit';
233
234  @Entry
235  @Component
236  struct WebComponent {
237    controller: webview.WebviewController = new webview.WebviewController();
238
239    build() {
240      Column() {
241        Button('fetchCookieSync')
242          .onClick(() => {
243            try {
244              // fetchCookieSync第二个参数表示获取隐私模式（true）或非隐私模式（false）下，webview的内存cookies。
245              let value = webview.WebCookieManager.fetchCookieSync('https://www.example.com', true);
246              console.log("fetchCookieSync cookie = " + value);
247            } catch (error) {
248              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
249            }
250          })
251        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
252      }
253    }
254  }
255  ```
256
257- 通过[configCookieSync](../reference/apis-arkweb/js-apis-webview.md#configcookiesync11)设置隐私模式下指定url的单个cookie的值。
258
259  ```ts
260  // xxx.ets
261  import { webview } from '@kit.ArkWeb';
262  import { BusinessError } from '@kit.BasicServicesKit';
263
264  @Entry
265  @Component
266  struct WebComponent {
267    controller: webview.WebviewController = new webview.WebviewController();
268
269    build() {
270      Column() {
271        Button('configCookieSync')
272          .onClick(() => {
273            try {
274              // configCookieSync第三个参数表示获取隐私模式（true）或非隐私模式（false）下，对应url的cookies。
275              webview.WebCookieManager.configCookieSync('https://www.example.com', 'a=b', true);
276            } catch (error) {
277              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
278            }
279          })
280        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
281      }
282    }
283  }
284  ```
285
286- 通过[existCookie](../reference/apis-arkweb/js-apis-webview.md#existcookie)查询隐私模式下是否存在cookie。
287
288  ```ts
289  // xxx.ets
290  import { webview } from '@kit.ArkWeb';
291
292  @Entry
293  @Component
294  struct WebComponent {
295    controller: webview.WebviewController = new webview.WebviewController();
296
297    build() {
298      Column() {
299        Button('existCookie')
300          .onClick(() => {
301            // existCookie参数表示隐私模式（true）或非隐私模式（false）下，查询是否存在cookies。
302            let result = webview.WebCookieManager.existCookie(true);
303            console.log("result: " + result);
304          })
305        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
306      }
307    }
308  }
309  ```
310
311- 通过[clearAllCookiesSync](../reference/apis-arkweb/js-apis-webview.md#clearallcookiessync11)清除隐私模式下所有cookie。
312
313  ```ts
314  // xxx.ets
315  import { webview } from '@kit.ArkWeb';
316
317  @Entry
318  @Component
319  struct WebComponent {
320    controller: webview.WebviewController = new webview.WebviewController();
321
322    build() {
323      Column() {
324        Button('clearAllCookiesSync')
325          .onClick(() => {
326            // clearAllCookiesSync参数表示清除隐私模式（true）或非隐私模式（false）下，webview的所有内存cookies。
327            webview.WebCookieManager.clearAllCookiesSync(true);
328          })
329        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
330      }
331    }
332  }
333  ```
334