文档章节

HTML5触摸界面设计与开发 读书笔记

lilugirl
 lilugirl
发布于 2015/11/04 23:32
字数 253
阅读 187
收藏 6

第四章

创建缓存层

//内存层
      var memoryCache={};

      var CACHE_TTL=864000000;
      var CACHE_PREFIX="ti";

      function setCache(mykey,data){
      	var stamp,obj;
      	stamp=Date.now();
      	obj={
      		date:stamp,
      		data:data
      	};

      	//localstorage层
      	localStorage.setItem(CACHE_PREFIX+mykey,JSON.stringify(obj));
      	memoryCache[CACHE_PREFIX+mykey]=obj;
      }
      console.log(window);

      function getCached(mykey){
      	var key,obj;
      	key=CACHE_PREFIX+mykey;
      	if(memoryCache[key]){
      		if(memoryCache[key].date-Date.now()>CACHE_TTL){
      			return false;
      		}
      		return memoryCache[key].data;
      	}

      	obj=localStorage.getItem(key);

      	if(obj){
      		obj=JSON.parse(obj);

      		if(Date.now()-obj.date>CACHE_TTL){
      			localStorage.removeItem(key);
      			delete(memoryCache[key]);
      			return false;
      		}
      		memoryCache[key]=obj;
      		return obj.data;

      	}

      }



      setCache('lilu',39);
      getCached('lilu');
      console.log(memoryCache['tililu']);
      console.log(localStorage);

 

管理localStorage

localStorage可以存放5MB的内容

以下公式可以计算localStorage的空间是否已经满了

 

1024*1024*5-unescape(encodeURIComponent(JSON.stringify(localStorage))).length

 

应用缓存Application Cache

 

<html manifest="birds.appcache">

 

 

CACHE MANIFEST
# The date below is a simple
# way to make sure I change this 
#file
# 2013-03-15r4


jquery-1.8.0.min.js
gull-360x112.jpg
gull-640x360.jpg
gull-720x225.jpg

FALLBACK:

NETWORK:
*

 

第六章 轻触  VS 单击 :基本的事件处理

使用自定义事件

  function togglePicture(){
    var h=document.querySelector('.picture');
    if(h.style.display=="none"){
      h.style.display="block";
    }else{
      h.style.display="none";
    }
  }

  window.addEventListener('tap',function(e){
    togglePicture();
  })



  window.addEventListener('touchstart',function(e){

    var tap=document.createEvent('CustomEvent');
    tap.initCustomEvent('tap',true,true,null);
    window.dispatchEvent(tap);
  
  });

 

© 著作权归作者所有

lilugirl
粉丝 99
博文 454
码字总数 130462
作品 0
杨浦
程序员
私信 提问
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
2018/06/29
0
0
响应式bootstrap管理员后台界面主题 - Charisma

Charisma是一套全功能的,免费,会员质量的响应式HTML5管理员界面模板,基于"Bootstrap",拥有了9套不同的主题颜色内容,可以满足你的不同需要! 在线演示 主要特性: 9套不同的主题 完全响应...

gbin1
2013/04/10
14.6K
17
10 个易于开发的移动应用开发框架

由于 iPhone 和谷歌Android 推出移动应用开发正在迅速增长。有无数的移动Web应用程序在互联网上公布,这些应用程序在发布之前都需要经过大量的工作和很多工程师辛勤的劳动,开发移动应用并不...

红薯
2011/09/28
7.9K
6
【年度盛宴】2012年度最佳 Web 前端开发工具和框架——《上篇》

2012年,Web 开发领域继续在快速的发展,HTML5 仍然在展示其跨平台的优越性,CSS3 被人们更多的应用到实际项目中,响应式设计(Responsive Design)技巧也被人越来越多的人熟知和使用。   ...

缪斯的情人
2013/01/02
972
2
针对开发者的20+款移动开发框架

本文收集了20款针对开发者的移动开发框架,以帮助他们为移动爱好者开发出新颖、有用、有趣味的应用。 1.Fries Fries是一款稳定的HTML-CSS-JS框架,用于在实际项目和原型设计中创造类似于And...

liuher
2014/07/26
437
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
今天
6
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
14
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部