全栈工程师开发手册 (作者:栾鹏)
快捷链接:
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
js系列教程13-原型、原型链、作用链、闭包全解
客户端存储全解
js中包含sessionStorage和localStorage以及cookie三种浏览器端的数据存储方式。
sessionStorage 、localStorage 和 cookie 之间的共同点:
都是保存在浏览器端,且同源的。
sessionStorage 、localStorage 和 cookie 之间的区别:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有网址路径(path)的概念,可以限制cookie只属于某个网址路径下。
存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
Web Storage (localStorage、sessionStorage 继承自Web Storage)支持事件通知机制,可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
检测当前是否联网
if(navigator.onLine) //也可以通过window事件online和offline设置离线或在线。chrome11以及之前的版本始终为true
console.log("当前处于在线状态");
else console.log("当前处于离线状态");
cookie
HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内,当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话,必须引入一种机制。
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。
Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
//cookie集成自定义类。包含了cookie添加,读取,删除
var CookieUtil = {
get:function(name){
var cookiename = encodeURIComponent(name)+"=";
var cookiestart = document.cookie.indexOf(cookiename),cookievalue = null;
if(cookiestart>-1){
var cookieend = document.cookie.indexOf(";",cookiestart);
if(cookieend==-1) cookieend = document.cookie.length;
cookievalue = decodeURIComponent(document.cookie.substring(cookiestart+cookiename.length,cookieend));
}
return cookievalue;
},
set:function(name,value,expires,path,domain,sexure){
var cookietext = encodeURIComponent(name)+"="+encodeURIComponent(value);
if(expires instanceof Date) cookietext+="; expires="+expires.toGMTString();
if(path) cookietext+="; path="+path;
if(domain) cookietext+="; domain="+domain;
if(sexure) cookietext+="; secure";
document.cookie = cookietext;
},
unset:function(name,path,domain,secure){
this.set(name,"",new Date(0),path,domain,secure);
}
};
//应用
CookieUtil.set("name","luanpeng","/books/projs/","www.example.com",new Date("January 1,2020"));//添加cookie
CookieUtil.get("name");//读取cookie
CookieUtil.unset("name","/books/projs/","www.example.com"); //删除cookie
sessionstorage
sessionStorage.setItem("name","luanpeng"); //添加存储key-value
sessionStorage.age = 12; //设置数据
for(var key in sessionStorage) //遍历数据
console.log(sessionStorage.getItem(key)); //getItem读取属性值
delete sessionStorage.name; //删除数据
sessionStorage.removeItem("age"); //删除数据
localstorage
localstorage同一个对象访问必须域名相同。数据保留至用户删除或清除缓存
localStorage.setItem("name","luanpeng"); //添加设置属性
localStorage.age = 12; //添加设置
console.log(localStorage.getItem("age")); //读取
console.log(localStorage.name); //读取