基于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