摘要:本篇JavaScript教程探讨了 JavaScript 存储的相关内容,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
javascript用于存储的方式可谓是多种多样,善于应用‘存储’可以大大的提高网站的性能,博主结合日常开发常见需求做一下总结,希望对大家有用~
1.cookie
存储大小: 4kb左右,以20个为上限,
清理机制: IE和Opera 会清理近期最少使用的cookie,Firefox会随机清理cookie。
主要应用: 购物车,登录状态
缺陷: 同域内http请求都会带cookie,浪费带宽
cookie安全如果 Cookie 具有 HttpOnly 属性且不能通过客户端脚本访问,则为 true;否则为 false。默认为 false。
ie 6 +都支持属性 HttpOnly,该属性有助于缓解跨站点脚本威胁。
常见应用:
· 使用原生js操作cookie
document.cookie = name + '=' + escape(value); //设置cookie//设置过期时间
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
if(arr=document.cookie.match(reg)){ //使用match匹配,arr[0] 为匹配成功的字符串,比如" test1=2222",之后为()中逐个匹配到的值
return unescape(arr[2]);
}
else{
return null;
}
}
//删除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
2.localstorage
存储内容: 只要是能序列化成字符串的内容都可以存储,利用JSON.stringify();
存储大小: 5m
兼容性: ie8+
主要应用:常用于ajax请求缓存
缺陷: 1. localstorage不被爬虫识别,所以不能用它完全取代url传參
2. 不能跨域共享,所以不要用以存储业务关键信息,更加不要存储安全信息,(cookie可以通过window.name解决,但是localstorage不能)
常见应用:
· 判断localstorage已经存储满了
try {localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
} catch (e) {
//如果存储满了,就全部删掉
localStorage.clear();//全部删除
localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
}
存储满后会抛出异常,只要捕获异常,再删除全部数据,即可。
JSON.stringify(localStorage).length 可以查看当前使用了的大小,用5M减一下可以得出粗略的剩余大小(但是很不精确)
· 判断localstorage已过期 (由于localstorage没有cookie的过期控制,需要自己控制)
//封装过期控制代码function set(key, value) {
var curTime = new Date().getTime();
try {
localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
} catch (e) {
//如果存储满了,就全部删掉
localStorage.clear();//全部删除
localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
}
}
function get(key, exp) {
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time > exp) {
localStorage.removeItem(key);//过期就清除key的值
console.log('信息已过期');
} else {
return JSON.stringify(dataObj.data);
}
}
· 判断浏览器是否支持localstorage
if (window.localStorage) {console.log('This browser supports localStorage');
} else {
console.log('This browser does NOT support localStorage');
}
· 常见api
localStorage.setItem("b", str); //设置b的值var b = localStorage.getItem("b"); //获取b
localStorage.clear();//全部删除
localStorage.removeItem(key);//清除key的值
3.sessionstorage
sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。其他与localstorage一样。
4.离线缓存(application cache)
兼容性: ie 9 +
主要应用:常用于静态资源缓存
存储大小:5m
缺陷: 由于原理上,application cache是把manifest上的资源一起下载下来,所以manifest里的内容不宜过多,数据量不宜过大;由于manifest的解析通常以页面刷新为触发点,且更新的缓存不会立即被使用,所以缓存的资源应以静态资源、更新频率比较低的资源为主。另外要做好对manifest文件的管理,由于清单内文件不可访问或manifest更新不及时造成的一些问题。
使用方法:
1.navigator.online 检测是否在线
2.浏览器向服务端发出请求, html标签中这样写: <html manifest=”demo.appcache” >;
这样浏览器就会向请求其它资源一样向服务器请求这个名为 test.manifest文件了。
在服务器端添加 mime-type text/cache-manifest
3.配置test.manifest 文件
①CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存
②NETWORK – 在此标题下列出的文件需要与服务器的连接,且不会被缓存
③FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
更新:只有server端的manifest文件改变,浏览器才会重新拉取离线数据,需要页面再次刷新(2次刷新才能获取新资源),更新是全局性的,无法单独更新某个文件。
CACHE MANIFEST# versin 1.0.0 //版本,若修改,则重新拉取
CACHE:
/theme.css //缓存该文件
/main.js
NETWORK: //不会被缓存的文件
login.jsp
FALLBACK: //回退页面
/html/ /offline.html
本文由职坐标整理发布,欢迎关注职坐标WEB前端JavaScript频道,获取更多JavaScript知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号