requestAnimationFrame 客户端存储 历史记录 worker

requestAnimationFrame

1、页面刷新前执行一次
2、1000ms 60fps -> 16ms
3、cancelAnimationFrame
4、用法和 setTimeout类似
5、兼容性

requestAnimationFrame(f)
cancelAnimationFrame(id)

//requestAnimFrame
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

//cancelAnimFrame
window.cancelAnimFrame = (function(){
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function( id){
window.clearTimeout(id);
};
})();

客户端存储

1、storage

localstorage
seesionstorage

如何存储数据
localStorage.name = ‘aimee’
localStorage.info = JSON.stringify({name:'aimee,company: 'duyi'})
如何取出数据
localStrorage.name
JSON.parse(localStorage.info)

存储的有效期
localStorage ->永久的，除非手动删除
sessionStorage ->临时，窗口关闭就没有了

作用域
localStorage ->文档源限制
sessionStorage ->文档源限制+窗口

API
语法 localStorage/seesionStorage.setItem(keyName, keyValue);设置属性值

1. setItem(name,val)设置属性值
2. getItem(name)获得属性值
3. removeItem(name) 移除属性
4. clear() 清除属性

2、cookie

存储信息到用户的设备上，数据量较小
navigator.cookieEnabled
检测是否启用了cookie

1.设置cookie值：
document.cookie = “name=aimee”
（每次只能设置一个值，因为浏览器会认为后面的键值对是这个cookie的属性）

2.获得cookie值：
document.cookie

不建议出现分号，逗号，空格的奇怪的符号
encodeURIComponent()
decodeURIComponent()

function getCookie(name) {
var name = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}

1.设置cookie存储期限

document.cookie = “name=scott;max-age=1000”;//单位 秒

2.expires 当前时间加上保存时间

var timestamp = (new Date()).getTime() + 10000;
var expires = new Date(timestamp).toGMTString();
document.cookie = “name=scott;expires=“+expires;

3.domain

4.path

var d = new Date();
d.setTime(d.getTime() + 保存时间);
d. toUTCString();

1.删除cookie max-age=0
需要带上键值对
document.cookie = ‘name=scott;max-age=0’;

2.expires 设置为之前的时间
document.cookie = ‘name=scott;expires= …’;

history

1、history.back()

2、history.forward()

3、history.go(n)

通过修改hash和hashchange事件来实现历史纪录管理

1、pushState
history.pushState(state, title, url);添加一条历史记录

2、replaceState
history.replaceState(state, title, url); 替换当前的历史记录

参数：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

事件
1、popstate 事件
历史记录发生改变时触发
调用history.pushState()或者history.replaceState()不会触发popstate事
件
2、hashchange事件
当页面的hash值改变的时候触发，常用于构建单页面应用

Worker （开启新线程）

var worker = new Worker('worker.js');
worker文件必须和主文件满足同源策略

worker和主线程之间的通信??
1、postMessage(n)方法

2、message事件

结束一个worker

close() 在worker作用域中调用(worker.js)

terminate() 在worker对象上调用(主进程的worker对象上 worker.terminate)

其他特性

1、importScripts('./math1.js','./math2.js')
worker只是window的子集，只能实现部分功能，不能获取到window, document，所以这里不要引juery zepto。可以引入一些计算类的库。

2、作用域 globalWorkerScope
可以继续生成worker对象 (暂时还不支持)
navigator
XMLHttpRequest
setTimeout/serInterval