前段时间参与了一个手机app嵌入webview应用的项目，感触颇多。正如前一篇博文&&所述，存在用web方式实现确实存在很多瓶颈。
　　最近研究了下竞争对手的一款mobie　app产品，存在一些值得学习和改进的地方：其首页（列表页）将所有的商品信息都请求下来，所以耗时会比较长。但由于是native　app，有程序启动画面和loading图片的存在，再加上手机用户对加载速度有心理预期，所以对用户体验影响不大。由于其对所有商品信息的缓存，用户由首页进入详情页后就可以将缓存的信息先展示给用户（而且缓存的信息刚好占满手机的一屏），其他内容随后加载。这样，用户由首页进入商品页和分类列表页时，给用户的感觉是相当之快。
　　他们用到的技术也没什么特别，也就是常说的本地存储。个人感觉，客户端做本地存储是相对容易的一件事情。html５的新特性中不是支持了对本地存储的功能吗，对于老版本不支持的本地存储的设备可以不用存储，也能达到优雅降级。故html５本地存储可以一试。
　　html５提供的本地存储的相关内容可以分为两个部分：客户端数据存储和离线存储。
　　客户端存储有localStorage, sessionStorage, Client-Side Database三种。localStorage和sessionStorage是简单的键值对存储，类似web中经常用到的cookie，也是通过js设置name和value；不同的是cookie会发送到服务器，并且其数量和大小有相应的限制。Client-Side Database则相对更强大一些，可以在本地进行创建数据库、本地数据库表进行增删查改等操作。
　　离线存储则是通过manifest文件对本地文件和需要服务器加载的文件进行配置，一般会对静态页、css、js、图片等静态文件进行离线存储类似于用浏览器在本地跑一个静态页面。当然好处是一些不变更的静态文件可以直接放在本地，而不需要从服务器端获取。
　　回到项目本身，我需要做的是将列表页面的数据缓存下来，然后在商品页预先显示出来，其他的数据再自行加载。这里我们可以通过使用客户端存储技术将所需的数据存储在本地，但问题是读取本地存储的操作是在js中进行的，而js赖以存在的商品页面不是存在本地的，而是需要和服务器建立连接从服务器获取的。而和服务器建立连接所花费的时间正是我们的瓶颈所在，本地存储的所产生的好处（一个html页面中少请求的一些字节）相比于此完全可以忽略不计。
　　再看看离线存储，我们倒是可以将一些持久化的css、js和图片放在本地通过manifest文件的配置，而无需从服务器端获取。但是也没有达到我们的项目需求。
　　至此，我看出来一些门道：B/S, C/S两种开发模式虽说有很多相同相似的地方，但其各自优缺点决定了其适合开发何种形式的程序。html作为web开发语言是为B/S开发服务的，即使html５提供了强大的一些特性，也是为web提供的，木有考虑到客户端开发。
　　不过，html５在制作mobile本地离线应用还是有较强的支持的，canvas、本地数据库对于制作本地应用还是提供相当大的便利。
阅读(...) 评论()利用html5的本地存储功能实现登录用户信息保存
在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。
用户名、密码保存，自动登录等，可以通过设置cookie实现，第一次登录网站后在本地计算机的中写入cookie，之后再次登录此网站查看cookie中现有的值，用cookie值进行网站登录即可。但是
cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie
速度很慢而且效率也不高。
HTML5提供了一个此类问题比较方便的解决方案，就是localstorage。数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5
使用 JavaScript 来存储和访问数据。
下面是一个登录保存用户名密码的实例：
&!DOCTYPE html&
&!--[if lt IE 7 ]&
&html lang="en" class="no-js ie6
&![endif]--&
&!--[if IE 7
&html lang="en" class="no-js ie7
&![endif]--&
&!--[if IE 8
&html lang="en" class="no-js ie8
&![endif]--&
&!--[if IE 9
&html lang="en" class="no-js ie9"&
&![endif]--&
&!--[if (gt IE
9)|!(IE)]&&!--&
&html lang="en" class="no-js"&
&!--&![endif]--&
&meta charset="UTF-8" /&
&!-- &meta
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"&&
&title&图书销售管理系统&/title&
&meta name="viewport" content="width=device-width,
initial-scale=1.0"&
&meta name="description"
&content="Login and Registration Form with HTML5
and CSS3" /&
&meta name="keywords"
&content="html5, css3, form, switch, animation,
:target, pseudo-class" /&
&meta name="author" content="Codrops"
&link rel="shortcut icon"
href="../favicon.ico"&
&script type="text/javascript"
src="js/jquery.min.js"&&/script&
&//先查看是否有本地数据（记住密码）
$(document).ready(function(){&
& //读取 localStage
本地存储，填充用户名密码,如果自动登录有值直接跳转；&
& //相反，跳转到本页面,等待登陆处理&
& var storage =
window.localS&
&&& var getEmail
= storage["email"];&
&&& var getPwd =
storage["password"];&
getisstroepwd = storage["isstorePwd"];&
getisautologin = storage["isautologin"];&
&&& if("yes" ==
getisstroepwd)&
if("yes" == getisautologin)&
&&&&&&&&&&&
if(( ("" != getEmail) ||(null != getEmail))
&& (("" != getPwd) ||(null !=
getPwd)))&
&&&&&&&&&&&
&&&&&&&&&&&&&&&
//lacoste& 已经保存 登陆信息 直接登陆&
&&&&&&&&&&&&&&&
// alert('正在自动登录');
&&&&&&&&&&&&&&&
$("email").val(getEmail);
&&&&&&&&&&&&&&&
$("#password").val(getPwd);&
&&&&&&&&&&&&&&
// window.location="";&&
&&&&&&&&&&&&&&
//加载时显示：正在自动登录
&&&&&&&&&&&&&&&
: '../servlet/LoginServlet?choose=login',
&&&&&&email
:& getEmail,
&&&&&&password
&&&&&dataType
&&&&&success
: function(data) {
(data.msg == "") {
&&&&&&&alert("账号信息异常，请核实后重新登录");
&&&&&&//登录成功后保存session，如果选择了记住密码，再保存到本地
&&&&&&&//window.location.href
='../index/index.jsp';
&&&&&error
: function() {
&&&&&&alert("系统错误");
&&&&&&&&&&&
&&&&&&&&&&&&&&&
$("#email").val(getEmail);&
&&&&&&&&&&&&&&&
$("#password").val(getPwd);&
&&&&&&&&&&&&&&&
document.getElementByIdx_x("isRemberPwdId").checked =
function login(){
userEmail=$("#email").val();&
userPassWord=$("#password").val();&
&&& var storage
= window.localS&
//记住密码&
if(document.getElementByIdx_x("isRemberPwdId").checked)&
//存储到loaclStage&&&
storage["email"] = userE&
storage["password"] =&
userPassW&
storage["isstorePwd"] =&
storage["email"] = userE&
storage["isstorePwd"] =&
//下次自动登录&
if(document.getElementByIdx_x("isAutoLoginId").checked)&
//存储到loaclStage&&&
storage["email"] = userE&
storage["password"] =&
userPassW&
storage["isstorePwd"] =&
storage["isautologin"] =&
storage["email"] = userE&
storage["isautologin"] =&
'../servlet/LoginServlet?choose=login',
: userEmail,
&&&&password
: userPassWord
&&&dataType :
&&&success :
function(data) {
(data.msg == "") {
&&&&&alert("用户名或密码错误");
&&&&//登录成功后保存session，如果选择了记住密码，再保存到本地
&&&&&window.location.href
='../index/index.jsp';
&&&error :
function() {
&&&&alert("系统错误");
alert("登录成功");
class="container"&
&&&header&
&&&/header&
&&&section&
id="container_demo"&
class="hiddenanchor"
id="toregister"&&/a&
&a class="hiddenanchor"
&&&&&id="tologin"&&/a&
id="wrapper"&
id="login" class="animate form"&
&&&&&&&form
id="loginform" name="loginform"
method="post"&
&&&&&&&&h1&登录&/h1&
&&&&&&&&p&
&&&&&&&&&label
for="username" class="uname" data-icon="u"&
邮箱& &/label&
&&&&&&&&&input
id="email" name="email" required="required"
&&&&&&&&&type="text"
placeholder="请输入邮箱" autofocus /&
&&&&&&&&/p&
&&&&&&&&p&
&&&&&&&&&label
for="password" class="youpasswd"
data-icon="p"&
&&&&&&&&&密码&/label&
&input id="password" name="password"
required="required"
&&&&&&&&&type="password"
placeholder="请输入密码" /&
&&&&&&&&/p&
class="keeplogin"&
&&&&&&&&&input
type="checkbox" name="isRemberPwdId" id="isRemberPwdId"
for="loginkeeping"&记住密码&&/label&
&&&&&&&&/p&
class="keeplogin"&
&&&&&&&&&input
type="checkbox" name="isAutoLoginId" id="isAutoLoginId"
for="autologin"&自动登录&&/label&
&&&&&&&&/p&
class="login button"&
&&&&&&&&&input
type="button" value="登录" onclick="login()" /&
&&&&&&&&/p&
class="change_link"&
&&&&&&&&没有账号?
&a href="#toregister"
class="to_register"&前去注册&/a&
&&&&&&&&/p&
&&&&&&&/form&
&&&&&&/div&
&&&&&/div&
&&&/section&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。1426人阅读
安卓开发（76）
因为最近有人问我怎么保存HttpClient的Cookie, 所以这里写下, 顺便记录总结吧. 当然, 有Android网络编程经历的童鞋一看就懂喇~&
就不多说了, 直接上代码:
* 本地存储Cookie
* @param response
private void saveCookies(HttpResponse response) {
SharedPreferences preferences = getSharedPreferences(&cookies&, MODE_PRIVATE);
List&Cookie& theCookies = client.getCookieStore().getCookies();
StringBuffer sb = new StringBuffer();
for(int k=0; k&theCookies.size(); k++)
Log.e(&循环获取Cookie信息&, &name = & + theCookies.get(k).getName());
Log.e(&循环获取Cookie信息&, &value = & + theCookies.get(k).getValue());
sb.append(theCookies.get(k).getName() + &=& + theCookies.get(k).getValue() + &;&);
Date date = theCookies.get(0).getExpiryDate();
Log.e(&cookie的有效时间是&,format.format(date));
preferences.edit().putString(&cookies&,sb.toString()).commit();
设置Cookie:
String url = &/test&;
HttpGet get = new HttpGet(url);
SharedPreferences sharedPreferences = getSharedPreferences(&cookies&, MODE_PRIVATE);
get.setHeader(&Cookie&, sharedPreferences.getString(&cookies&, &&));
HttpResponse response = client.execute(get);
HttpEntity entity = response.getEntity();
if(response.getStatusLine().getStatusCode() != HttpStatus.SC_OK)
Log.e(TAG, &保存失败&);
Log.e(TAG, &保存成功&);
catch (Exception e)
e.printStackTrace();
这样即使退出应用后, 下次重新使用Cookie, 也可以避免一些重复的HTTp请求, 比如重复登录什么的. 但是要注意一个地方, Cookie是有效期的, 如果超过有效期再去使用就会无效, 需要重新登录才能进行其他的操作. 如上面的代码, 测试的Cookie有效时间是一个月.&
&所以在使用Cookie, 可以同时保存Cookie的有效期, 当然不保存也可以, 携带无效Cookie去访问是服务器自然也会返回相应的提示, 根据提示响应即可. 另外唠嗑唠嗑, Cookie是一种很简单的文本数据, 记录了服务器和客户端之间的访问信息, 因此读取和存储, 管理的效率很高, 但不好的是不够安全, 本地化存储最好注意安全. 当然如果不是什么很重要的数据, 并且有良好的使用习惯, 也没什么.
上面是针对Android开发环境中原生的HttpClient, 如果是使用其他Apache的HttpClient jar包, 比如commons-httpclient-3.1.jar. 可能会发现上面的方法使用起来并不方便, 那么我们还可以模仿浏览器处理Cookie的策略, 使用该jar包中特有的httpPost.setRequestHeader()方法添加访问信息, 比如
httpPost.setRequestHeader(&Host&, &host地址&);
httpPost.setRequestHeader(&Connection&,&Keep-Alive&);
httpPost.setRequestHeader(&Cookie&, cookie);
httpPost.setRequestHeader(&User-Agent&, userAgent);
然后, 我们利用抓包工具, 随便查看电脑浏览器的某个请求, 能看到Headers中有类似格式的Cookie数据(下图是访问有道网站的请求):
可见, 这种处理方式跟浏览器的策略是类似的.
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：136558次
积分：2216
积分：2216
排名：第16849名
原创：69篇
转载：16篇
评论：60条
(1)(1)(1)(2)(2)(4)(5)(4)(5)(5)(19)(5)(4)(1)(2)(4)(7)(5)(1)(3)(6)移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
开发H5 webapp时经常需要使用本地存储，如localStorage和sessionStorage存储一些数据，相比最多能存4k的cookie相比，用起来很好用。但是localStorage在iOS Safari、chrome和UC浏览器中的隐私模式（也叫无痕模式）下无法使用，手机Safari浏览器中具体表现是：
localStorage对象仍然存在
但是setItem会报异常：QuotaExceededError
getItem和removeItem直接忽略
Safari中控制台截图
判断浏览器是否支持localStorage的方法:
function isLocalStorageSupported() {
var testKey = 'test',
storage = window.sessionStorage;
storage.setItem(testKey, 'testValue');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
阅读(...) 评论()}