web前端缓存

今天刚上班就听到群里的几位大佬在讨论所开发的系统需要重复的登录的恶心之处，听各位大佬争辩的同时，想到了自己以前整理过的缓存技术，算是比较全面的，当然了只是帮助自己理解的，但是很明显我并没有记在脑子里，所以分享出来，跟大家一起温习温习

不过很多时候单方面的技术很难满足我们在业务中的需求，有的时候我们需要混合使用

1、Cookie

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie。

cookie的结构：简单地说，cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。 

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。 

（1）保存用户登录状态。（2）跟踪用户行为。（3）定制页面。（4）创建购物车，例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。 

cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种： 

（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能； 
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的； 
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除； 
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。 

session是存储在IIS或者Apache进程中的，默认的大小的1024KB

JS设置cookie:

 

假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为：

document.cookie = ‘name = ’+ username;

 

 

JS读取cookie:

假设cookie中存储的内容为：name=jack;password=123

则在B页面中获取变量username的值的JS代码如下：

var username=document.cookie.split(";")[0].split("=")[1];

//JS操作cookies方法!

//写cookies

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();

}

读取cookies

function getCookie(name)

{

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

 

删除cookies

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();

}

 

 

完整代码

 

//如果需要设定自定义过期时间,那么把上面的setCookie　函数换成下面两个函数就ok;

function setCookie(name, value, time) {

    var strsec = getsec(time);

    var exp = new Date();

    exp.setTime(exp.getTime() + strsec * 1);

    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

 

function getCookie(name) {

    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

    if (arr = document.cookie.match(reg))

        return unescape(arr[2]);

    else

        return null;

}

 

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();

}

 

function getsec(str) {

    alert(str);

    var str1 = str.substring(1, str.length) * 1;

    var str2 = str.substring(0, 1);

    if (str2 == "s") {

        return str1 * 1000;

    } else if (str2 == "h") {

        return str1 * 60 * 60 * 1000;

    } else if (str2 == "d") {

        return str1 * 24 * 60 * 60 * 1000;

    }

}

setCookie("name", "hayden");

alert(getCookie("name"));

//这是有设定过期时间的使用示例：

//s20是代表20秒

//h是指小时，如12小时则是：h12

//d是天数，30天则：d30

setCookie("name", "hayden", "s20");

 

2、localStorage

一、什么是localstorage？

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

二、localstorage的优势与局限

localStorage的优势

1、 localStorage拓展了cookie的4K限制

2、 localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、 localStorage在浏览器的隐私模式下面是不可读取的

4、 localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、 localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

 

三、localstorage的使用

这里要特别声明一下，如果是使用IE浏览器的话，那么就要UserData来作为存储，这里主要讲解的是localStorage的内容，所以userData不做过多的解释，而且以博主个人的看法，也是没有必要去学习UserData的使用来的，因为目前的IE6/IE7属于淘汰的位置上，而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴的技术，所以在使用上面一般我们不会去对其进行兼容

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性

 

if(！window.localStorage){

      alert("浏览器支持localstorage");

      return false;

}else{

     //主逻辑业务

}

localStorage的写入，localStorage的写入有三种方法

if(！window.localStorage){

            alert("浏览器支持localstorage");

            return false;

        }else{

            var storage=window.localStorage;

            //写入a字段

            storage["a"]=1;

            //写入b字段

            storage.a=1;

            //写入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

 }

 

 

这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

注意：存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

 

localStorage的读取

 

 

if(!window.localStorage){

            alert("浏览器支持localstorage");

        }else{

            var storage=window.localStorage;

            //写入a字段

            storage["a"]=1;

            //写入b字段

            storage.a=1;

            //写入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

            //第一种方法读取

            var a=storage.a;

            console.log(a);

            //第二种方法读取

            var b=storage["b"];

            console.log(b);

            //第三种方法读取

            var c=storage.getItem("c");

            console.log(c);

        }

 

 

这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道

我之前说过localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤

下面我们就来说一说localStorage的删、改这两个步骤

改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下

 

if(!window.localStorage){

            alert("浏览器支持localstorage");

        }else{

            var storage=window.localStorage;

            //写入a字段

            storage["a"]=1;

            //写入b字段

            storage.b=1;

            //写入c字段

            storage.setItem("c",3);

            console.log(storage.a);

            // console.log(typeof storage["a"]);

            // console.log(typeof storage["b"]);

            // console.log(typeof storage["c"]);

            /*分割线*/

            storage.a=4;

            console.log(storage.a);

        }

 

 

这个在控制台上面我们就可以看到已经a键已经被更改为4了

localStorage的删除

 

1、 将localStorage的所有内容清除

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            console.log(storage);

            storage.clear();

            console.log(storage);

2、 将localStorage中的某个键值对删除

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            console.log(storage);

            storage.removeItem("a");

            console.log(storage.a);

 

 

 

localStorage的键获取

 

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            for(var i=0;i<storage.length;i++){

                var key=storage.key(i);

                console.log(key);

            }

 

 

使用key()方法，向其中出入索引即可获取对应的键。

四、localstorage的其他注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

 

if(!window.localStorage){

            alert("浏览器支持localstorage");

        }else{

            var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            console.log(storage.data);

        }

 

 

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

 

          var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            //将JSON字符串转换成为JSON对象输出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj);

3、sessionStorage

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。下面是其用法:

 

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>SessionStorage</title>

    <script type="text/javascript">

    window.onload = function() {

        //首先获得body中的3个input元素

        var msg = document.getElementById("msg"); //文本框要输入的内容

        var getData = document.getElementById("getData"); //获取数据

        var setData = document.getElementById("setData"); //保存数据

        var removeData = document.getElementById("removeData"); //移除数据

        setData.onclick = function() //存入数据

            {

                if (msg.value) {

                    sessionStorage.setItem("data", msg.value); //把data对应的值保存到sessionStorage

                    alert("信息已保存到data字段中");

                } else {

                    alert("信息不能为空");

                }

            }

        getData.onclick = function() {

            //获取数据

            var msg = sessionStorage.getItem("data");

            if (msg) {

                alert("data字段中的值为：" + msg); //把data对应的值弹出来

            } else {

                alert("data字段无值！");

            }

        }

        removeData.onclick = function() //移除数据

            {

                var msg = sessionStorage.getItem("data");

                sessionStorage.removeChild(msg);

            }

    }

    </script>

</head>

 

<body>

    <input id="msg" type="text" />

    <input id="setData" type="button" value="保存数据" />

    <input id="getData" type="button" value="获取数据" />

    <input id="removeData" type="button" value="移除数据" />

</body>

</html>

另外还有一点要注意的是，其他类型读取出来也要进行转换。