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

新建主题 记录代码

学员动态

  • I**y向课程作业中提交了代码
  • w**7向课程作业中提交了代码
  • I**y向课程作业中提交了代码
  • L**9在课程作业中回复了老师:老师,请问为什么我写...
  • c**8向课程作业中提交了代码
  • I**g向课程作业中提交了代码
  • 浮**梦向课程作业中提交了代码
  • 三**年添加了笔记:为了支持方便的分页功...
  • L**1完成了课程的作业
  • I**g向课程作业中提交了代码
  • j**a添加了笔记:占用内存空间小的类型...
  • F**k在课程中提出了问题:我按照课程指导安装了...
  • 三**年添加了笔记:上面这种方法解决了B...
  • c**x创建了代码片段:哪里能开发票办证小姐...
  • H**g向课程作业中提交了代码
  • L**9在课程作业中回复了老师:老师,请问我写的这个...
  • 三**年添加了笔记:我们创建一个分页的类...
  • j**a添加了笔记:使用记事本编写Jav...
  • 天**君回复了i**r在课程中的问题:欢迎来到天码营学习,...
  • 天**君回复了c**8在课程中的问题:欢迎来到天码营学习,...
  • 天**君回复了唐**学在课程中的问题:欢迎来到天码营学习,...
  • L**9向课程作业中提交了代码
  • c**8在课程作业中回复了老师:老师您好,有5个小问...
  • 浮**梦向课程作业中提交了代码
  • j**a添加了笔记
  • c**8在课程作业中回复了老师:老师还有一个问题! ...
  • h**i向课程作业中提交了代码
  • I**y向课程作业中提交了代码
  • I**y在课程中提出了问题:老师,这里不是很理解...
  • j**a添加了笔记:使用记事本编写Jav...
  • w**3评论了L**9在课程中的作业:不要直接去获取nam...
  • c**8在课程中提出了问题:老师啊,这章讲的也太...
  • h**i向课程作业中提交了代码
  • I**y在课程中提出了问题:老师,这样的赋值到底...
  • 天**君回复了p**0在课程中的问题:欢迎来到天码营学习,...
  • c**8在课程作业中回复了老师:全部回答了!太感谢...
  • w**3评论了L**9在课程中的作业:那是我给的解题思路里...
  • c**8评论了h**6在课程中的作业:我也是学生,不是老师...
  • w**3回复了t**y在课程中的问题:https://ww...
  • I**y向课程作业中提交了代码
  • L**9向课程作业中提交了代码
  • L**9在课程作业中回复了老师:老师,题目提醒中这句...
  • w**3评论了I**g在课程中的作业:public sta...
  • w**7向课程作业中提交了代码
  • S**e向课程作业中提交了代码
  • j**a添加了笔记:包(Package)...
  • h**i向课程作业中提交了代码
  • 天**君回复了7**4在课程中的问题:欢迎来到天码营学习,...
  • 天**君回复了F**k在课程中的问题:欢迎来到天码营学习,...
  • 天**君评论了c**8在课程中的作业:1、Optional...
  • 浮**梦向课程作业中提交了代码
  • I**y向课程作业中提交了代码
  • I**y向课程作业中提交了代码
  • I**y向课程作业中提交了代码
  • H**g向课程作业中提交了代码
  • j**a添加了笔记:不仅仅是使用Java...
  • I**y向课程作业中提交了代码
  • l**5向课程作业中提交了代码
  • j**a添加了笔记:数学运算中存在自动类...
  • j**a添加了笔记:包(Package)...
  • 三**年完成了课程的作业
  • 手**掌在课程中提出了问题:void start...
  • w**7完成了课程的作业
  • c**x创建了代码片段:ASDLKJASL打...
  • L**9在课程作业中回复了老师:谢谢老师,我试...
  • w**3回复了白**2在课程中的问题:这叫做for-eac...
  • 三**年完成了课程的作业
  • c**8向课程作业中提交了代码
  • 三**年添加了笔记:首先在UserRep...
  • h**6在课程作业中回复了老师:这样能成吗...
  • I**y向课程作业中提交了代码
  • w**3回复了手**掌在课程中的问题:void 是返回类型...
  • 天**君评论了h**6在课程中的作业:这是其他同学的作业,...
  • 三**年完成了课程的作业
  • w**3回复了手**掌在课程中的问题:安装java8重新配...
  • 浮**梦在课程作业中回复了老师:不是很懂这道题,可不...
  • 三**年添加了笔记:给BlogRepos...
  • t**y在课程中提出了问题:老师,已经add,为...
  • I**g在课程作业中回复了老师:请问方法哪里写错了?...
  • _**s向课程作业中提交了代码
  • j**a添加了笔记:保存代码: 快捷键C...
  • I**y向课程作业中提交了代码
  • 三**年添加了笔记:为了支持分页,我们需...
  • w**7在课程作业中回复了老师:页面显示是正常的啊,...
  • 白**2在课程中提出了问题:for(T elem...
  • I**y向课程作业中提交了代码
  • 手**掌在课程中提出了问题:但是我装8的时候提示...
反馈意见