微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

详解 JavaScript 存储

2016-10-22 22:42 前端大全

(点击上方公众号,可快速关注)


作者:伯乐在线专栏作者 - 陈被单

链接:http://web.jobbole.com/88241/

点击 → 了解如何加入专栏作者


javascript用于存储的方式可谓是多种多样,善于应用‘存储’可以大大的提高网站的性能,博主结合日常开发常见需求做一下总结,希望对大家有用~


1.cookie


存储大小:   4kb左右,以20个为上限,

清理机制:  IE和Opera 会清理近期最少使用的cookie,Firefox会随机清理cookie。

主要应用:   购物车,登录状态

缺陷:         同域内http请求都会带cookie,浪费带宽

cookie常见携带参数


属性项 属性项介绍
name=
value
键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样
Expires/
max-age
过期时间,在设置的某个时间点后该 Cookie 就会失效,如 expires=Wednesday, 09-Nov-99 23:12:40 GMT
Domain 生成该 Cookie 的域名,如 domain=”soulteary.com”
Path 该 Cookie 是在当前的哪个路径下生成的,如 path=/admin/
Secure 如果设置了这个属性,那么只会在 SSH 连接时才会回传该 Cookie
http http-only   true: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



专栏作者简介 ( 点击 → 加入专栏作者 


陈被单:热爱前端,欢迎交流

打赏支持作者写出更多好文章,谢谢!



关注「前端大全」

看更多精选前端技术文章

↓↓↓

 
前端大全 更多文章 前端实现文件的断点续传 更快学习 JS 的 6 个简单思维技巧 漫画:如何用 JS 脚本抢月饼? 前端这条路,我们该何去何从(续) JavaScript 浏览器事件解析
猜您喜欢 Sublime Text 2 跨平台支持Win/Mac/Linux C#7.0中有哪些新特性? 【独家】Hold住!Festo蚂蚁机器人来袭 一个 Command 键的两年辛酸史 Mysql max_allowed_packet 被修改设置为1GB或者1024B原因