android 怎么清理 XWalkView 缓存的LocalStorage

一、android 怎么清理 XWalkView 缓存的LocalStorage

WebView的缓存可以分为页面缓存和数据缓存：

1，页面缓存:>指加载一个网页时的html、JS、CSS等页面或者资源数据。>这些缓存资源是由于浏览器的行为而产生，开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。>缓存的索引存放在/data/data/package_name/databases下。>文件存放在/data/data/package_name/cache/xxxwebviewcachexxx下。

2，数据缓存:>数据缓存分为AppCache和DOM Storage两种。>这些缓存资源是由开发者的直接行为而产生，所有的缓存数据都由开发者直接完全地掌控。>Android中Webkit使用一个db文件来保存AppCache数据（my_path/ApplicationCache.db）>Android中Webkit会为DOM Storage产生两个文件（my_path/localstorage/http_h5.m.taobao.com_0.localstorage和my_path/localstorage/Databases.db）。

1.webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); 2.context.deleteDatabase(“WebView.db”); 3.context.deleteDatabase(“WebViewCache.db”);4.webView.clearCache(true); 6.webView.clearFormData(); 7.getCacheDir().delete(); 8.用File的delete方法删除缓存文件夹;12345

老实说，对我的问题，没多大用，还是那句话，有事请Google

其实如果你只是想要每次用webView.loadUrl(url)加载新的页面显示，那么调用webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE)就可以实现了，并不需要去删除缓存文件什么的。

但是我的项目中使用了JavaScript的交互，而JavaScript的加载是通过头文件去获取加载的，所以每次我去获取新的页面的时候，虽然页面是新的，但是头文件中的数据还是old的，所以每次加载到的js都是old的。那么如何去做呢？

上面提到这个头文件是浏览器HTTP相应头去获取的，开发者只能间接的影响，并不能控制。

所以单独的webView.clearCache(true)是不能成功的，还需要清除webView的Cookie才行。

所以我最终的解决方法是在Activity的onDestroy()方法中添加如下代码：

@Overrideprotected void onDestroy(){ super.onDestroy();//清空所有Cookie

CookieSyncManager.createInstance(QzmobileApp.getContext());//Create a singleton CookieSyncManager within a context

CookieManager cookieManager= CookieManager.getInstance();// the singleton CookieManager instance

cookieManager.removeAllCookie();// Removes all cookies.

CookieSyncManager.getInstance().sync();// forces sync manager to sync now

webView.setWebChromeClient(null);

webView.setWebViewClient(null);

webView.getSettings().setJavaScriptEnabled(false);

二、JS代码计算LocalStorage容量示例详解

1、了解localStorage的存储限制对开发者来说至关重要，其标准容量为5M。然而，验证这个容量以及计算剩余空间却不太常见。计算总容量时，我们首先创建一个10KB大小的字符串，不断累加存入localStorage，直到超出最大存储时，记录累积的大小。注意在开始之前需要清空localStorage。代码示例如下：

2、let str='0123456789' let temp=''//先做一个 10KB的字符串 while(str.length!== 10240){ str= str+'0123456789'}//先清空 localStorage.clear() const computedTotal=()=>{ return new Promise((resolve)=>{//不断往 LocalStorage中累积存储 10KB const timer= setInterval(()=>{ try{ localStorage.setItem('temp', temp)} catch{//报错说明超出最大存储 resolve(temp.length/ 1024- 10) clearInterval(timer)//统计完记得清空 localStorage.clear()} temp+= str}, 0)})}(async()=>{ const total= await computedTotal() console.log(`最大容量${total}KB`)})()

3、通过这段代码，我们最终得出最大存储量为5120KB，即5M。接下来计算已使用容量，只需要遍历localStorage中的每个存储项，累加每个值的length属性，得到已使用空间。示例如下：

4、const computedUse=()=>{ let cache= 0 for(let key in localStorage){ if(localStorage.hasOwnProperty(key)){ cache+= localStorage.getItem(key).length}} return(cache/ 1024).toFixed(2)}(async()=>{ const total= await computedTotal() let o='0123456789' for(let i= 0; i< 1000; i++){ o+='0123456789'} localStorage.setItem('o', o) const useCache= computedUse() console.log(`已用${useCache}KB`)})()

5、通过这个方法，我们可以得到已使用容量。最后，剩余可用容量可通过简单计算得出，即总容量减去已使用容量。示例如下：

6、const computedsurplus=(total, use)=>{ return total- use}(async()=>{ const total= await computedTotal() let o='0123456789' for(let i= 0; i< 1000; i++){ o+='0123456789'} localStorage.setItem('o', o) const useCache= computedUse() console.log(`剩余可用容量${computedsurplus(total, useCache)}KB`)})()

7、通过以上步骤，我们可以准确地计算localStorage的容量及其使用情况。更多关于JS计算LocalStorage容量的资料，欢迎访问自由互联的相关文章。

三、JS组件封装之监听localStorage的变化

在日常开发过程中，我们常常会遇到需要频繁使用到的一些功能或插件。为了方便日后查找和使用，我决定将它们封装成一个个组件。目前我已基于vue: ^2.6.14创建了一个新的vue项目，用于测试组件的可用性。我的目标是不仅让组件易于使用，还要确保它们经过充分测试。

今天，我想分享一个我新开发的监听localStorage变化的功能。这个功能的核心在于JavaScript的一个方法：dispatchEvent。它允许我们主动触发DOM事件，通过它可以在设置localStorage时监听其变化并将值保存到变量中，实现响应式更新。具体来说，当调用localStorage的setItem方法时，会触发一个自定义事件，这个事件携带了被设置的键和新值，从而实现监听。

为了实现这一功能，我编写了一个名为dispatchEventStorage的函数。其代码如下：

function dispatchEventStorage(){

const signSetItem= localStorage.setItem;

localStorage.setItem= function(key, val){

let setEvent= new Event('setItemEvent');

window.dispatchEvent(setEvent);

signSetItem.apply(this, arguments);

export default dispatchEventStorage;

在使用这个功能时，可以在Vue组件中这样导入并使用：

通过这种方式，我们可以轻松地监听localStorage的变化并实时更新组件的状态。这是一个简单但实用的功能，希望对你有所帮助。