Cookie

cookie是客户端用来存储数据的,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送

Web Storage

html5标准中的Web Storage包括了两种存储方式:sessionStorage和localStorage
sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage仅仅是会话级别的存储
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

区别

Web Storage和Cookie相似都是客户端用来存储数据的，区别是它是为了更大容量存储设计的
Cookie的大小是受限的，最多只能存储4KB的数据；并且每次你请求一个新的页面的时候，Cookie都会被发送过去，这样无形中浪费了带宽；再有就是不安全，很容易被拦截者截取进行篡改
Web Storage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要自己封装setCookie、getCookie等方法
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地存储数据而生

阅读更多

Object对象存在两个转化为字符串的方法，一个是常用的toString，另一个则是toLocaleString。接下来通过示例来展示各种不同数据类型下的输出差异
注:基本数据类型在调用toString与toLocaleString时，会首先将基本数据类型实例化为对应的对象类型。比如var x = 'abc';，示例中x并不是对象类型，但是在调用时，会首先通过new String()将文本实例化为String包装类型

对象

效果相同，调用的是原始的Object.toString()方法

阅读更多

众所周知，npm是nodejs默认的包管理工具，我们通过npm可以下载安装或者发布包，但是npm其实存在着很多小问题，比如安装速度慢、每次都要在线重新安装等，而yarn也正是为了解决npm当前存在的问题而产生。不说别的，光github上那么多星，你还不用这个那就真的凹凸了
Yarn官网(支持中文): https://yarnpkg.com
主要亮点:

安装

1. 可直接通过npm工具全局安装

   1	npm install -g yarn

2. 参考官网各平台安装方式: https://yarnpkg.com/zh-Hans/docs/install

3. 输入yarn -V，正确显示版本号说明安装成功;yarn -h可查看帮助信息

阅读更多

115又涨价了

记得115网盘刚出来那会，某宝不到一百一年会员，第二年涨到接近两百，今天直接三百了，还让不让我们这些穷屌丝活了，看个小姐姐就这么贵吗？本文基于自己年费过期又不想花那么多钱的背景下，自己动手搭建一个可离线下载、在线观看的站点，种子也是可以的哦，O(∩_∩)O哈哈哈~

需求

1. Linux服务器一台(本文使用vultr提供的服务器)
2. SSH连接工具[putty,xshell](本文使用Ubuntu终端工具)
3. 一个域名并配置好二级域名映射到服务器ip

如何获取可参考:手把手教你近乎免费搭建VPS和网站

阅读更多

作为开发者，有两个顶级编辑器，即使你不用，你也一定要知道它们是什么——
·编辑器之神——Vim
·神的编辑器——Emacs
所以本文就来介绍vim以及它的常用命令，Vim是从vi发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用
vim键盘图中文版:

tips:在linux环境下，可以在命令行输入vimtutor命令学习使用vim，当然前提是你安装上了vim

阅读更多

首发于: https://github.com/leoyaojy/tips/issues/9

1. 下载YouTube视频只需在youtube后添加一个to即可
2. Linux系统基本上分两大类：
   1、RedHat系列：Redhat、Centos、Fedora等，使用yum；
   2、Debian系列：Debian、Ubuntu等，使用apt
3. ubuntu删除连接到服务器-最近的服务器记录：gedit ~/.config/nautilus/servers
4. 修改ubuntu语言环境：locale-gen zh_CN.UTF-8 en_US.UTF-8，若无效果可直接修改/etc/default/locale文件为：LANG="zh_CN.UTF-8" LANGUAGE="zh_CN:zh"之后重启即可
5. 创建目录并进入该目录：mkdir test && cd $_
6. 由于没有公钥，无法验证下列签名： NO_PUBKEY D68FA50FEA312927 问题解决:
   sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys D68FA50FEA312927

   阅读更多

之前在arukas.io免费docker搭建ss服务以及免费日本樱花搭建谷歌镜像两文中对arukas折腾过一番，我们可以利用其免费搭建ss以及谷歌镜像，但是有个不足的是arukas的app ip和端口号经常在变，使我们在使用的过程中非常不便，每次都要登录到官网去获取实时的ip和端口。本文继续对arukas继续折腾，研究它的api文档，从而实现实时获取ss的app ip以及端口，跳过登录环节

效果图

我在arukas官网配置了10台ss，获取详细配置请点击:https://ss.luckyw.cn

阅读更多

之前在建站：Node+MongoDb+Express简单实例一文中使用过express，本文就来介绍下express的jade模板引擎，为什么不介绍另一个express默认的模板引擎ejs了，因为我觉得jade更简洁，更符合我个人的喜好
注:jade因为版权问题已改名为pug了，具体可看这Renaming jade -> pug

安装执行

全局安装:

1

sudo npm install -g jade

接下来我们先看下jade命令的常用参数，，注意区分大小写

阅读更多

本文是在慕课网学习了HTML5音乐可视化之后产生的，老师讲解的很详细，建议你先去看一看，我新增了播放控制列表、文件上传大小限制、重复上传文件检测、自动播放下一首，效果图如下:

在线体验地址: https://demo.luckyw.cn/code.html?path=music-visualize
源码地址: https://github.com/leoyaojy/demo/blob/master/src/music-visualize/index.html

Audio API

我将要介绍的HTML5 Audio API与Audio标签是不一样的，Audio标签只是HTML5更语义化的一个表现，而HTML5 Audio API则让我们可以在代码中直接操作原始的音频流数据，对其进行任意加工再造，这里我只涉及到对音频流的分析，从而实现音乐的可视化
一段音频在到达扬声器播放之前，我们可以对其进行拦截得到音频流数据，本文涉及到的是对音量的控制以及对音频流数据的分析，这一切都是基于AudioContext对象来的，所以我们需要创建这个对象，再从这个对象去创建其他音频节点。目前仅Chrome和Firefox对其提供了支持，所以我们仅能在Chrome和Firefox下才能看到效果，为了能同时在这两种浏览器下工作，我们需要做下兼容写法:

1

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

阅读更多

之前在HTML5 Canvas属性和方法汇总一文中，介绍过Canvas的各种属性以及方法的说明，并列举了自己写的一些Canvas demo，接下来开始写一个简单的小游戏吧，有多简单，这么说吧，代码不到100行，先上效果图:

左侧为我们控制的控制板，右侧为假想的电脑控制的控制板
体验小游戏链接: https://demo.luckyw.cn/code.html?path=tennis-game

初始化

首先在html页面中添加中添加一个canvas元素，并给出一个id用于在js代码中获取该元素并对其进行操作

1

<canvas id="canvas"></canvas>

然后就是对各种参数，注释中都有给出，我就不多说了，直接看

1
2
3
4
5
6
7
8
9

//获取canvas元素以及2d绘图环境c，以及设置canvas宽高为800x600
var canvas = document.getElementById("canvas"),
    c = canvas.getContext("2d"),
    W = canvas.width = 800,
    H = canvas.height = 600;
var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2,	//球的位置、半径以及在X轴及Y轴的速度
    panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2,	//控制板的宽高以及初始位置
    player1Score = 0, player2Score = 0, winnerScore = 3,	//记录玩家的分数以及得了多少分算赢
    isEnd = 0;	//判断是否比赛结束的变量，0为未结束，1为已结束

阅读更多