0

点赞

0

回复

927

浏览

HTML5本地存储:SessionStorage, LocalStorage, Cookie

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。 区别在于前两者属于WebStorage,创建它们的目的便是存储客户端数据。 而Cookie早在网景公司的浏览器中就开始支持,最初目的是为了保持HTTP的状态。 概念的异同 Cookie是存储在客户端的小型文本文件,可以包含若干键值对,每个键值对可以设置过期时间(默认过期时间为关闭浏览器时)。 Cookie会在每次发送HTTP请求时附加到 Cookie 头字段,服务器以此得知用户所处的状态。 在HTTP标准中,规定Cookie至少要有4K,至少支持300项Cookie,每个域名至少支持20项。 HTTP中Cookie的规范可以参考: 读 HTTP 协议 http://harttle.com/2014/10/01/http.html 。 LocalStorage和SessionStorage都是本地存储,不会被发送到服务器上。同时空间比Cookie大很多,一般支持5 10M。 与Cookie类似,每个域名下会有不同的localStorage和SessionStorage实例,而且localStorage可以在多个标签页中互相访问。 其中LocalStorage没有过期时间,除非手动删除它会一直存在。而SessionStorage在浏览器会话结束时(关闭标签页,不包括刷新和跳转)清空。 注意SessionStorage中的Session指的是浏览器会话,而非服务器端通过Cookie实现的Session。参考: Cookie/Session的机制与安全 http://harttle.com/2015/08/10/cookie session.html COOKIE的使用 Cookie/Session的机制与安全 http://harttle.com/2015/08/10/cookie session.html 中提到了服务器可以在HTTP响应中设置 set cookie 字段来设置Cookie。 事实上客户端也可以操作Cookie,比如之前的电商网站会使用Cookie来存储购物车信息。 客户端JavaScript也可以通过浏览器提供的 document.cookie 来操作Cookie,但 document.cookie 整个是一个字符串, 所以操作较为复杂,Web开发中一般倾向于封装Cookie的读写操作: function setCookie(key,value){...

sessionlocalstoragecookiehtml5javascript

4

点赞

7

回复

29851

浏览

CSS的表白:七夕巧克力心

七夕到啦!然而我是程序员,就来给程序员解决一些烦恼吧!程序员最不理解的两件事: 1. 别人的代码 2. 妹子的心 趁着七夕的月色,我们来搞定妹子的心吧!使用纯CSS来获得妹子的心其实并不难。。各位看官来看我的尝试: http://tianmaying.com/app/css heart/ http://tianmaying.com/app/css heart/ ,如图: 既然是CSS的表白,我们便只写两行HTML: Love ...

html5css3

2

点赞

6

回复

9062

浏览

HTML5游戏系列(2):装B达人

小编的第一款HTML游戏:“ 你能戳几下? http://tianmaying.com/tutorial/html game ”引起了微信圈不错的反响,这更加激发了“天码营”团队以及小编本人的斗志。此次小编带来了可玩性更强的HTML5游戏:“装B达人”!还没有玩过的可以关注天码营公众号“TMY EDE”并获取最新文章即可得到游戏链接。也可以直接打开链接: http://tianmaying.com/app/collect b/ http://tianmaying.com/app/collect b/ 下面便开始详述“装B达人”是怎样炼就的!先上图,一睹为快: 简介 游戏流程 B会不断地从天而降,玩家可以移动篮子来装B,我们会给出装B计数。一旦B已经接触地面在本次装B失败,游戏结束(Game Over~)。 技术框架 本游戏的实现借助于HTML5提供的 Canvas https://developer.mozilla.org/en US/docs/Web/API/Canvas_API 标签,Canvas是一个基于位图的矩形绘图区域,该标签最初由Safari提供支持,在2014年10月终于被纳入 HTML标准 http://www.w3.org/TR/html5 。进入HTML标准意味着主流浏览器都将对此提供支持,Google在Android4.0中便对Canvas提供了硬件加速。这意味着在HTML中复杂的游戏也可以做到很好的性能。 Canvas: a resolution dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. HTML5, W3C “装B达人”引入了 CreateJS http://createjs.com/ 来进行更方便的Canvas操作,以及Sprite素材的载入。 CreateJS: A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. CreateJS是一个组件库,它提供了四部分的工具: 1. EaselJS http://createjs.com/easeljs :提供了更加方便的Canvas操作,这是我们主要使用的一个组件。 2. TweenJS http://createjs.com/tweenjs :更方便地进行HTML5中元素属性的渐变和动画。 3. SoundJS http://createjs.com/soundjs :提供了丰富的音频处理API。 4. PreloadJS http://createjs.com/preloadjs :用来管理Web资源的载入,我们用它来载入图片素材,并形成一个Sprite对象以供使用。 实现流程 理论上HTML文件只需提供一个 canvas 标签,其它的交给JS来处理。最终的实现也是这样的,HTML框架非常简单,只需引入需要的样式的脚本即可。在脚本中完成游戏的初始化过程与交互动画。 首先利用PreloadJS载入需要的图片素材;然后用这些素材来初始化整个场景。此后游戏就可以开始啦!游戏开始后,我们需要在Tick(时钟)事件到达时重新绘图,完成如下几个操作: 1. 让B下落。只需增加该元素的 y 属性。 2. 检测B与地面的碰撞。如果发生碰撞则游戏结束。 3. 检测B与篮子的碰撞。如果发生碰撞则分数+1,从天上再掉下一个B。 为了让玩家能够移动篮子,需要监听 mousedown 和 pressmove 事件: 1. 当 mousedown 时,记录按下的位置。 2. 当 pressmove 时,计算与 mousedown 时的位置差,并相应地移动篮子。 HTML框架 “装B达人”使用HTML5 Canvas实现,因此HTML框架非常简单。只需定义一个 并在HTML头部引入相应的样式和JS即可! ...

html5

6

点赞

6

回复

13933

浏览

HTML5游戏系列(1):你能戳几下?

HTML5提供了很多新的语义标签,以及更加丰富的浏览器API。与此同时,移动设备优先的Web框架也大量涌现。甚至出现了很多的HTML5游戏引擎,并且可以获得相当好的性能。微信的流行,使得HTML5的应用越来越火爆。于是小编也来凑凑热闹,出品一个牛刀小试的HTML5游戏:“ 你能戳几下 http://tianmaying.com/app/clicking/ ”。本文便来记述整个开发流程,非常简单!先点击右上角的“参考代码”,并下载源码,跟着小编十分钟便能开发自己的游戏! 可以来体验一把这个游戏: http://tianmaying.com/app/clicking/ http://tianmaying.com/app/clicking/ 页面框架 打开后首页是这样的: 点击开始后,用户开始狂戳屏幕正中间的按钮,直到5秒的倒计时结束。最后给出提示: 首先,我们新建一个HTML文件,比如就叫 index.html 。在里面添加一个基本的空HTML文档: ...

html5

1

点赞

0

回复

2231

浏览

jQuery Mobile 入门

Jquery mobile是一个基于HTML5,拥有响应式网站特性,兼容所有主流移动设备平台的统一UI接口系统,与前端开发框架。可以运行在所有智能手机,平板电脑和桌面设备上。 jQuery Mobile秉承 “write less, do more”的原则到了一个新的高度:不需要为每一个移动设备或者操作系统单独开发应用,jQuery Mobile框架可以使您设计一个高度响应式的网站或应用运行于所有流行的智能手机,平板电脑和桌面系统。 官方网站: http://jquerymobile.com/ http://jquerymobile.com/ 示例: http://tianmaying.github.io/jquery mobile demo/ http://tianmaying.github.io/jquery mobile demo/ 基础框架 jQuery Mobile提供了触控相关的事件、一系列基础样式,以及小屏幕常用的UI组件。同时,它依赖于jQuery。于是,一个基本的jQuery Mobile的HTML文件可能是这样的结构: ...

html5javascript

新建主题 记录代码

学员动态

  • w**3评论了h**u在课程中的作业:可能题目表述不清, ...
  • l**m向课程作业中提交了代码
  • d**7在课程中提出了问题:哦,明白了,谢谢老...
  • h**u添加了笔记:初学Java时我们的...
  • w**z向课程作业中提交了代码
  • x**4向课程作业中提交了代码
  • 天码君回复了h**u在课程中的问题:欢迎来到天码营学习,...
  • d**7在课程中提出了问题:打印出来的HTML必...
  • 天码君回复了J**2在课程中的问题:欢迎来到天码营学习,...
  • c**`向课程作业中提交了代码
  • 勺**5向课程作业中提交了代码
  • F**s向课程作业中提交了代码
  • 天码君回复了x**l在课程中的问题:欢迎来到天码营学习,...
  • S**n完成了课程的作业
  • f**a向课程作业中提交了代码
  • d**7向课程作业中提交了代码
  • l**m向课程作业中提交了代码
  • z**8添加了笔记:注意,将一个整数和字...
  • x**3向课程作业中提交了代码
  • S**n完成了课程的作业
  • z**o在课程作业中回复了老师:请问本地运行能显示如...
  • l**m评论了:请问什么是doubl...
  • w**3回复了d**7在课程中的问题:代码问题可以直接在代...
  • w**3评论了h**u在课程中的作业:后面会讲到 循环 。...
  • h**u在课程中提出了问题:老师你好,在这个例子...
  • w**3评论了x**3在课程中的作业:System.out...
  • h**u添加了笔记:Scanner对象可...
  • 天码君回复了y**9在课程中的问题:欢迎来到天码营学习,...
  • S**n完成了课程的作业
  • S**n完成了课程的作业
  • h**u添加了笔记:每个Java语句都需...
  • f**a添加了笔记:Q1.fo...
  • 勺**5在课程作业中回复了老师:运行没问题,就是提交...
  • 刘保方向课程作业中提交了代码
  • w**z向课程作业中提交了代码
  • f**a向课程作业中提交了代码
  • 天码君回复了S**n在课程中的问题:欢迎来到天码营学习,...
  • d**7在课程中提出了问题:老师您看看这个错在哪...
  • c**`向课程作业中提交了代码
  • z**o向课程作业中提交了代码
  • d**7向课程作业中提交了代码
  • w**3评论了h**u在课程中的作业:一开始 在定义的时候...
  • f**a添加了笔记:Q...
  • z**8添加了笔记:Java语言自带的关...
  • 天码君回复了O**e在课程中的问题:欢迎来到天码营学习,...
  • w**3评论了h**u在课程中的作业:根据要求我们知道让我...
  • h**u向课程作业中提交了代码
  • w**3评论了x**3在课程中的作业:post post....
  • z**8评论了:Scanner对象可...
  • d**7在课程中提出了问题:public voi...
  • d**7在课程中提出了问题:public voi...
  • l**n在课程中提出了问题:老师出现这个情况应该...
  • x**3在课程作业中回复了老师:这给地方我知道怎么...
  • l**m向课程作业中提交了代码
  • h**u在课程中提出了问题:是的我在英国,只能利...
  • 天码君回复了x**3在课程中的问题:欢迎来到天码营学习,...
  • 天码君回复了F**s在课程中的问题:欢迎来到天码营学习,...
  • f**a向课程作业中提交了代码
  • z**8添加了笔记:=='和'!='作为...
  • S**n完成了课程的作业
  • h**u在课程作业中回复了老师:老师,请问以上 by...
  • S**n完成了课程的作业
  • d**7向课程作业中提交了代码
  • h**u在课程中提出了问题:老师你好,在第2课的...
  • l**m向课程作业中提交了代码
  • c**`向课程作业中提交了代码
  • 天码君回复了j**7在课程中的问题:欢迎来到天码营学习,...
  • n**0评论了:受益匪浅,学习笔记 ...
  • d**7在课程中提出了问题:public voi...
  • c**e添加了笔记:用快捷键CTRL+S...
  • l**m向课程作业中提交了代码
  • w**3回复了h**u在课程中的问题:已经在代码上回答你了...
  • w**z向课程作业中提交了代码
  • h**u在课程中提出了问题:老师你好,在第三课的...
  • F**s向课程作业中提交了代码
  • h**u在课程中提出了问题:老师你好,请问把最后...
  • w**3回复了d**7在课程中的问题:java 严格要求字...
  • S**n完成了课程的作业
  • 天码君回复了l**n在课程中的问题:欢迎来到天码营学习,...
  • w**3回复了l**n在课程中的问题:你安装的应该是最新版...
  • h**u在课程作业中回复了老师:老师你好,在讲义中有...
  • w**3回复了h**u在课程中的问题:代码相关的问题,可以...
  • d**7在课程中提出了问题:打印出来的HTML必...
  • 刘保方向课程作业中提交了代码
  • f**a添加了笔记:...
  • w**z向课程作业中提交了代码
  • 天码君回复了坦克在课程中的问题:欢迎来到天码营学习,...
  • z**8添加了笔记
  • w**3回复了h**u在课程中的问题:那这是太好了,计算机...
  • w**3评论了d**7在课程中的作业:不要写死了字符串,题...
  • d**7在课程中提出了问题:老师好,这是我的作业...
  • z**8向课程作业中提交了代码
  • w**z向课程作业中提交了代码
  • 紫荷吟月向课程作业中提交了代码
  • w**3评论了z**o在课程中的作业:不是按作业要求实现的...
  • S**n完成了课程的作业
  • d**7在课程中提出了问题:您好,为什么错了...
  • w**3回复了h**u在课程中的问题:抱歉,视频只放了wi...
  • h**u在课程作业中回复了老师:老师你好,请问怎么强...
  • 天码君回复了l**m在课程中的问题:欢迎来到天码营学习,...
反馈意见