一、HTML5储存
0x1 LocalStorage和sessionStorage
1、相同的使用方法
- 使用 setItem 方法设置存储内容
- 使用 getItem 方法获取存储内容
- 使用 removeltem 方法删除存储内容
- 使用 clear 方法清除所有内容
- 使用 length 属性获取存储内容个数
- 使用 key 方法获取存储字段
localStorage.setItem('site','geekmubai.com')
localStorage.getItem('site')
localStorage.removeItem('site')
localStorage.length
localStorage.key(0)
localStorage.clear
2、不同的存储时效
- localStorage 存储会持久化
- sessionStorage 存储会在网页会话结束后失效
3、不同的存储容量
- localStorage 容量-般在 2- 5 Mb 左右
- sessionStorage 存储容量不一,部分浏览器不设限
0x2 使用 Storage 时的注意点
1、存储容量超出限制
- 抛出 QuotaExceededError 异常
- 存储值时应使用 try catch 捕获异常
// try...catch 主要用于捕获代码运行时的异常,并进行异常处理。
// try 部分包含运行时,可能出现异常的代码.
// 而 catch 部分包含错误发生时运行的代码。
try {
// try 中写可能产生异常的语句
localStorage.setItem(key, data);
save();
} catch (e) {
// catch 中写负责异常处理的语句
console.log(e.name);
2、存储类型的限制
- 仅能存储字符串
- 注意类型转换
3、SessionStorage 失效机制
- 刷新页面并不会失效
- 相同URL不同标签页不能共享 sessionStorage
4、Web Storage 的优化
- 性能与存储容量大小无关,与读取次数有关
- 减少读取 item 次数
- 单个 item 中尽可能多的存储数据
0x3 实现一个带有过期机制的 localStorage
带有过期机制的 localStorage 的功能需求
- 可以设置数据的存储时间
- 过期数据清理
- 自行维护存储空间
Demo
<script>
'use strict'
;(function () {
var ls = window.localStorage
function oops () {
return console.warn('your browser is not supported localStorage API')
}
function getItem (key) {
var data = ls.getItem(key) //在没有数据项的情况下,data为null
data = JSON.parse(data)||{}
if (data.time === 0) {// 上句如是data = JSON.parse(data),在data.time时,就会报错。所以调整成data = JSON.parse(data)||{}
return data.value
} else if (Date.now() > data.time) { // 判断是否超时
ls.removeItem(key)
return ''
} else {
return typeof data.value !== 'undefined' ? data.value : ''
}
}
function setItem (key, value, time) {
if (typeof key === 'undefined') {return}
var data = {
time: time ? Date.now() + time : 0,
value: value
}
data = JSON.stringify(data)
try {
ls.setItem(key, data)
} catch (e) {
ls.clear()
ls.setItem(key, data)
}
}
function removeItem (key) {
ls.removeItem(key)
}
function clear () {
ls.clear()
}
window.cacheStorage = {//浏览器支持使用localStorage,不支持输出提示语
getItem: ls ? getItem : oops,
setItem: ls ? setItem : oops,
removeItem: ls ? removeItem : oops,
clear: ls ? clear : clear
}
})()
</script>
0x3 如何创建数据库和“表”
1、了解 IndexedDB 数据库
- IndexedDB 数据库是一种事务型数据库
- 是 NoSQL 数据库
- 使用 JS 对象存储数据
2、创建数据库和表
- IndexedDB.open 创建数据库
indexedDB.open(“dbname’,’version’) - Open 方法返回一个 IDBRequest 对象
- IndexedDB.deleteDatabase(‘dbname’) 删除数据库
- IndexedDB.CreateObjectStore 创建“表”
二、HTML5拖拽
0x1 传统方法
实现鼠标事件位置的4种方式
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。
event.pageX、event.pageY
类似于event.client,但它们使用的是文档坐标而非窗口坐标。包含滚动条滚动的距离。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。
注:function(e)中的e的含义
简单来说就是指向了当前发生的事件(click、mouseover等等),保存了当前事件的信息。如鼠标点击事件,有鼠标的坐标信息。
其中,e是标准浏览器传递进去的事件参数,低版本IE不会传递,事件参数放置在window.event对象中,所以兼容低版本的IE要加上这句e=e||window.event;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<style type="text/css">
.dialog {
position: absolute;
left: 100px;
top: 50px;
width: 200px;
}
.title {
background: #D7DEF0;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
cursor: move;
}
.content {
background: #F0F0F0;
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="dialog" class="dialog">
<div id="title" class="title">Title</div>
<div class="content"></div>
</div>
<script>
var isMouseDown = false;
var lastPoint = {};
$("#title").on("mousedown", function(e) {//给title绑定鼠标按下事件
console.log(e);
isMouseDown = true;
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}).on("mousemove", function(e) { //绑定鼠标移走事件
if(isMouseDown) {
var dialog = $("#dialog"); //取dialog框
var targetX = parseInt(dialog.css("left")) + e.pageX - lastPoint.x; //取css中left距离,加上鼠标移动的距离
var targetY = parseInt(dialog.css("top")) + e.pageY - lastPoint.y;
dialog.css("left", targetX + "px"); //设置移动后的框的位置
dialog.css("top", targetY + "px");
lastPoint.x = e.pageX; //更新lastPoint
lastPoint.y = e.pageY;
}
}).on("mouseup", function() { //绑定鼠标放开事件
isMouseDown = false;
lastPoint = {};
});
</script>
</body>
</html>
0x2 HTML5拖拽
三个重要的点
- Draggable=true
放在被拖拽的元素上,元素才有拖拽效果 - 拖拽事件 ondragstart
在用户开始拖动元素或选择的文本时触发绑定的事件 - dataTransfer 对象
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drag</title>
<style>
.container {
width: 200px;
height: 200px;
background-color: yellow;
}
.target {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="container" class="container" ondrop="drop(event)" ondragover="dragover(event)"></div>
<div id="target" class="target" draggable="true" ondragstart="dragstart(event)"></div>
<script>
function dragover(e) {
e.preventDefault();
}
function dragstart(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
三、SVG
0x1 SVG基础
1、SVG是什么
- 指可伸缩矢量图形(Scalable Vector Graphics)
- 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形
- 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准
- 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
2、SVG的优势
- 便于读取和修改
- 小
- 可伸缩
- 开放标准
0x2 SVG视口
- Viewport
SVG 可见区域的大小,或者可以想象成舞台大小,画布大小。
除了SVG本身,其他一些元素,例如的width/height属性也可以使用.上面的这些单位,也是默认单位是像素。
<svg width="800" height="600"></svg> //默认是像素800px
常用单位:
- Viewbox——视区盒子
SVG 就像是我们的显示器屏幕,viewBox 就是截屏工具选中的那个框框,最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示!
viewBox="x, y, width, height"
// x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度
- preserveAspectRatio
使用preserveAspectRatio属性来让viewBox保持宽高比
preserveAspectRatio=[defer] <align-x> <meetOrSlice>
defer
defer参数是可选值,它仅仅在image元素上应用preserveAspectRatio
属性时才使用。在使用其它元素时会被忽略。
align参数
align参数控制viewBox是否强制进行均匀的缩放
meetOrSlice参数
通俗来说,该参数控制viewBox缩放的方式
align参数以及图解
align参数的3×3种个组合取值(有规律)
meetOrSlice参数
0x3 SVG坐标系统
- 世界坐标系统
计算机图形学中的世界坐标系
- 最初坐标系统
SVG图像自动画的坐标系统
- 用户坐标系统(白框)
0x4 转换坐标系统
- SVG transform
SVG元素可以通过缩放,移动,倾斜和旋转来变换,类似于HTML元素使用
transform来变换 - transform 属性
<rect x="200" y="100" width="400" height="200"
transform="translate(100)">
//在SVG中,transform的坐标变换是相对于画布左上角进行计算;
SVG transform属性语法略微自带偏移,CSS transform更加纯粹。
- SVG transform translate位移
transform="translate(<tx> [<ty>])"
tx 代表 x 轴上的 translation 值; ty 代表 y 轴上的 translation 值。
ty 值是可选的,如果省略,默认值为0。
当多个参数值的时候,可以使用逗号,或者直接空格分隔。
数值中一定一定一定一定不能包含单位
注意:HTML元素的偏移是相对自己的中心点,SVG元素的偏移是相对SVG的左上角。
单纯地位移来讲,无论你相对于哪个位置,实际偏移的位置都是一样的,因此,从表现上讲,两者最终的位置看上去还是一样的。
- SVG transform rotate旋转
transform="rotate(<rotate-angle> [<cx> <cy>])"
rotate-angle 代表旋转角度,无单位,默认单位是度。
可选 cx 和 cy 值代表无单位的旋转中心点。
如没设置 cx 和 cy,旋转点为当前用户坐标系的原点。
SVG transform rotate旋转
SVG元素默认是SVG左上角为中心变换。
SVG transform scale缩放
transform="scale(<sx> [<sy>])"
参数说明
sx 代表沿x轴的缩放值,用来水平延长或者拉伸元素;
sy 代表沿y轴缩放值,用来垂直延长或者缩放元素。
sy 值是可选的,如果省略默认值等于 sx 。
- SVG transform scale缩放
HTML元素的缩放是相对自己的中心点,SVG元素的缩放是相对SVG的左上角。
当SVG元素缩放时,整个坐标系被缩放,导致元素在视窗中重新定位