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