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

新建主题 记录代码

学员动态

  • J**y向课程作业中提交了代码
  • h**2向课程作业中提交了代码
  • D**n在课程作业中回复了老师:这道题是什么意思? ...
  • 天码君回复了s**n在课程中的问题:欢迎来到天码营学习,...
  • z**x评论了:安装的时候出现这个界...
  • A**i向课程作业中提交了代码
  • L**z在课程中提出了问题:好的那我还是装回我的...
  • z**x在课程中提出了问题:老师我把Java换成...
  • c**6向课程作业中提交了代码
  • h**2向课程作业中提交了代码
  • R.D完成了课程的作业
  • z**x添加了笔记:将希望输出信息放到S...
  • c**u评论了:13课实战弄不明...
  • w**3评论了z**x在课程中的作业:这个是根据你的jav...
  • w**3评论了z**x在课程中的作业:...
  • A**i向课程作业中提交了代码
  • A**i向课程作业中提交了代码
  • 天码君回复了h**2在课程中的问题:欢迎来到天码营学习,...
  • 三年向课程作业中提交了代码
  • L**z向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • 天码君回复了z**x在课程中的问题:欢迎来到天码营学习,...
  • A**i向课程作业中提交了代码
  • h**2向课程作业中提交了代码
  • L**z在课程中提出了问题
  • z**x在课程作业中回复了老师:想请问下老师这行代码...
  • J**y向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • 天码君回复了D**G在课程中的问题:欢迎来到天码营学习,...
  • 天码君回复了L**z在课程中的问题:欢迎来到天码营学习,...
  • J**y向课程作业中提交了代码
  • z**x在课程作业中回复了老师:所以说包的作用就像是...
  • 三年添加了笔记:接下来引入MyBat...
  • D**n向课程作业中提交了代码
  • 三年添加了笔记:需要修改MyBati...
  • A**i向课程作业中提交了代码
  • w**3回复了z**x在课程中的问题:可以设置字体 htt...
  • L**z向课程作业中提交了代码
  • J**y向课程作业中提交了代码
  • 三年添加了笔记:分析我们的业务场景,...
  • D**n向课程作业中提交了代码
  • L**z向课程作业中提交了代码
  • w**3回复了L**z在课程中的问题:嗯,毕竟几乎公司和学...
  • 三年添加了笔记:先来定义Mapper...
  • z**x在课程中提出了问题:请问下老师,安装的时...
  • A**i向课程作业中提交了代码
  • 三年在课程中提出了问题:请老师解答下这课作业...
  • w**3评论了D**n在课程中的作业:看清楚要求,参数表要...
  • h**6向课程作业中提交了代码
  • 天码君回复了X**E在课程中的问题:欢迎来到天码营学习,...
  • 天码君回复了c**h在课程中的问题:欢迎来到天码营学习,...
  • w**3回复了z**x在课程中的问题:百度找一下如何彻底删...
  • l**o向课程作业中提交了代码
  • z**x添加了笔记:public sta...
  • 天码君回复了工**武在课程中的问题:欢迎来到天码营学习,...
  • A**i完成了课程的作业
  • w**3回复了z**x在课程中的问题:安装java8 不要...
  • w**3回复了z**x在课程中的问题:软件安装问题每个人碰...
  • 三年添加了笔记:这里你注意两点即可:...
  • w**3评论了z**x在课程中的作业:对的,一般是在包下的...
  • w**3回复了L**z在课程中的问题:你如果要用java1...
  • 天码君回复了D**n在课程中的问题:欢迎来到天码营学习,...
  • w**3回复了z**x在课程中的问题:重新安装对应版本的e...
  • 天码君回复了R.D在课程中的问题:欢迎来到天码营学习,...
  • 天码君回复了A**i在课程中的问题:欢迎来到天码营学习,...
  • L**z向课程作业中提交了代码
  • L**z在课程中提出了问题:老师,刚才我换了一个...
  • z**x在课程作业中回复了老师:所以说,是要先创建包...
  • 三年在课程作业中回复了老师:老师,我的代码中报这...
  • z**x在课程中提出了问题:哇,我换成课程里的压...
  • w**3评论了z**x在课程中的作业:这是一个类的主体部分...
  • 工**武在课程中提出了问题:请问为什么课程的视频...
  • J**y向课程作业中提交了代码
  • z**x在课程中提出了问题:老师我的电脑是64位...
  • L**z向课程作业中提交了代码
  • 三年添加了笔记:关于MyBatis本...
  • 天码君回复了A**i在课程中的问题:欢迎来到天码营学习,...
  • D**n向课程作业中提交了代码
  • L**z向课程作业中提交了代码
  • L**z向课程作业中提交了代码
  • z**x在课程中提出了问题:对应版本?我的JDK...
  • 天码君评论了三年在课程中的作业:你的代码应该是可以跑...
  • z**x在课程中提出了问题:好的老师,那版本11...
  • z**x在课程中提出了问题:老师,为什么它那个中...
  • z**x在课程作业中回复了老师:入门到精通这本我今天...
反馈意见