基於h5的安卓app開啓本地存儲

基於h5的安卓app開啓本地存儲

一.引入

    移動應用程序(App)和HTML5都是目前最火的技術，二者之間也有不少重疊之處。在移動設備瀏覽器裏運行的html5的web頁面，也可以重新打包成不同平臺上運行的app。讓原本安卓，ios兩次開發的事情變成了一次，由於移動web端框架的興起，讓移動端開發變得更爲便捷，高效，如weui，mzui等，最近項目中正式用到了weui 升級版 jquery weui。

二.所遇問題

移動端開發難免會遇到本地存儲信息的問題，最常見的就是用戶登錄後，後臺回傳的一些數據需要在移動端進行保存，而移動端使用的是基於網頁開發的，多個頁面中數據該怎麼持久化，共享呢，去W3school上查查會發現

HTML5 提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲。第二天、第二週或下一年之後，數據依然可用。

if (localStorage.pagecount)
{
  localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
  localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");

sessionStorage - 針對一個 session 的數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

if (sessionStorage.pagecount)

{
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
  sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

在瀏覽器上調試使用完全正常，但是打包至安卓中問題就出來了，在安卓模擬器上調試localStorage存儲總是出現錯誤，檢查了半天也沒解決，後來查資料，發現安卓使用webview中需要開啓緩存存儲才能夠在頁面中使用localStorage，於是在WebView初始化時進行一下設置就行了，

一行代碼解決問題：

mWebView.getSettings().setDomStorageEnabled(true);

使用localstorage存儲對象以及取出對象：

//設置值

localStorage.setItem("PurOrderData", JSON.stringify(data));

//獲取值

var PurOrderData = JSON.parse(localStorage.getItem("PurOrderData"));

//爲防止沒有設置值獲取後出現object類型 轉化出錯,提前進行設置空字符串

localStorage.setItem("PurOrderData", "");


瀏覽器配置跨域訪問：

目標中加上配置： --allow-file-access-from-files --args --disable-web-security --user-data-dir