浏览器缓存与本地缓存的区别
浏览器缓存：
- 只服务于单个网页
- 任何网页都具有网页缓存
- 不安全，不可靠，不知道网站缓存了哪些网页，以及缓存了网页上的哪些资源
本地缓存：
- 为整个Web应用程序服务的
- 只缓存指定缓存的网页
- 可靠，可以控制对哪些内容进行缓存，不对哪些内容进行缓存，还可以用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更为强大的离线应用程序
本地缓存------cookie
- 1.浏览器Cookie：支持的数据存储量相对较少，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉，有些浏览器甚至不支持；同时，Cookie存在安全性问题，如果cookie被人拦截了，就可以取得所有的session信息。
- 2.所有浏览器对cookie都支持。
- 3.cookie存储数据方法：
Cookie.write("testKey", cookie);
Cookie.read("testKey");
本地缓存-------localstorage,sessionStorage:
- 1.localstorage：本地存储，浏览器关闭也不会清除数据。在浏览器上清除缓存，数据会被清除。sessionStorage：会话存储，浏览器关闭会清除数据。
- 2.本地存储，有5M大小。
- 3.支持IE8+,chrome4.0+，Firefox3.0+，opera10.5+,safari4.0+,移动设备iphone 2.0+,android 2.0+.
了解更多sessionStorage、localStorage、cookie
下面是对cookie的函数封装
var Cookie = {
//添加cookie 或 修改 cookie
// key:键
// value:值
// expiresDay:过期时间（单位：天）
setCookie : function (key, value, expiresDay) {
var date = new Date();
date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
// 为了测试方便先写死10秒后过期
// date.setTime(date.getTime() + 10 * 1000);
document.cookie = key + "=" + escape(value) + ";expires=" + date.toGMTString();
},
//批量增加
//cookieObj是对象
setCookies : function (cookieObj, expiresDay) {
var date = new Date();
date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
for (var tempProp in cookieObj) {
document.cookie = tempProp + "=" + escape(cookieObj[tempProp]) + ";expires=" + date.toGMTString();
}
},
//获取某个cookie的值
getCookie : function (key) {
//先按照分号+空格切割cookie串
var cookie = document.cookie;
var cookieArr = cookie.split("; ");
//遍历数组得到每一组cookie
for (var tempCookie of cookieArr) {
//每组cookie按照等号去切割
var keyAndValueArr = tempCookie.split("=");
if (keyAndValueArr[0] == key) {
//需要解码
return unescape(keyAndValueArr[1]);
}
}
},
// 立即删除某个cookie
delCookie : function (key) {
this.setCookie(key, "", -10);
}
}
下面是对localstorage的应用
//可以通过点语法进行存储
window.localStorage.name = "小雪";
//中括号语法
window.localStorage["age"] = 18;
//以上两种方式不推荐写
//通过setItem方法来进行存储
window.localStorage.setItem("sex", "女");
//通过getItem方法进行获取
console.log(window.localStorage.getItem("name"));
//删除
window.localStorage.removeItem("sex");
//清空全部 (慎用)
window.localStorage.clear();
//看看是否可以存储一个对象
var person = {
name : "小雪",
age : 18,
isMarry : false,
friends : [
{
name : "小雨"
},
{
name : "小红"
}
],
boyfriend : {
name : "小黑"
}
}
/*
* 注意：localStorage存储对象或者数组等复杂结构，
* 会把当前存储的数据类型转换成字符串，最后的值就是字符串
* 例如会把对象转换成[object, object] ，把这个值存储进去
* ，最后取出来也是字符串[oject, object]，对象的内部结构
* 全部消失， 这不是我们想要的结果。
*/
window.localStorage.setItem("person", person);
window.localStorage.setItem("arr", ["a", [], {}]);
var personStr = window.localStorage.getItem("person");
var arrStr = window.localStorage.getItem("arr");
console.log(typeof personStr);
console.log(typeof arrStr);
/*
* 我们可以通过序列化和反序列化操作来实现对
* 复杂的数据结构进行存储，先把要存储的复杂结构，
* 进行序列化操作（JSON.stringify()）转换成JSON串，
* 存储起来后，将来获取，通过反序列化操作（JSON.parse()）
* 进行转换成对象，方可使用。
*/
window.localStorage.setItem("person2", JSON.stringify(person));
var personObj = JSON.parse(window.localStorage.getItem("person2"));
console.log(personObj);
//通过length属性获取存储的个数
console.log(window.localStorage.length);
//通过遍历获取所有存储的信息
for (var i = 0; i < window.localStorage.length; i++) {
console.log(window.localStorage.key(i) + "===" + window.localStorage.getItem(window.localStorage.key(i)));
}
