HTML5 sessionStrage localStorage cookie

时间 2019-11-29

标签 html5 html sessionstrage localstorage cookie 栏目 HTML5 繁體版

原文原文链接

sessionStrage 是HTML5新增的会话存储对象，不具备跨域等一切异/多页面操做，用于临时保存同一窗口（标签页）的数据，在窗口关闭或浏览器关闭将会删除这些数据。javascript

与之相对应的有 localStorage 将数据保存在客户端硬件设备上，无论它是什么，意思就是下次打开计算机时候数据还在。html

下面详细对于前端页面缓存进行整理一下：前端

前端缓存有 cookie sessStrage localStorage 三种。java

1.cookie jquery

1)大小限制。cookie大小限制在4k左右，不适合存业务数据，多用于身份认证跨域

2)随HTTP事务发送。cookie每次都会随HTTP事务一块儿发送，通常请求会占用浪费带宽数组

1.1应用浏览器

js设置cookie缓存

document.cookie="popped=yes"

var cookie = {//封装好的方法
    set:function(key,val,time){//设置cookie方法
        var date=new Date(); //获取当前时间
        var expiresDays=time;  //将date设置为n天之后的时间
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
        document.cookie=key + "=" + val +";expires="+date.toGMTString();  //设置cookie
    },
    get:function(key){//获取cookie方法
        /*获取cookie参数*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //获取cookie，而且将得到的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //将得到的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
        var tips;  //声明变量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循环查找cookie中的tips变量
            var arr=arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
            if(key==arr[0]){  //匹配变量名称，其中arr[0]是指的cookie名称，若是该条变量为tips则执行判断语句中的赋值操做
                tips=arr[1];   //将cookie的值赋给变量tips
                break;   //终止for循环遍历
            }
        },
      delete:function(key){ //删除cookie方法
         var date = new Date(); //获取当前时间
         date.setTime(date.getTime()-10000); //将date设置为过去的时间
         document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
        }
        return tips;
    }
}

jQuery 操做cookie安全

$.cookie('the_cookie', 'the_value');

//添加一个"会话cookie"

$.cookie('the_cookie','the_value',{
    expires:7,  
    path:'/',
    domain:'jquery.com',
    secure:true
})
//expires：（Number|Date）有效期；设置一个整数时，单位是天；也能够设置一个日期对象做为Cookie的过时日期；
//path：（String）建立该Cookie的页面路径；
//domain：（String）建立该Cookie的页面域名；
//secure：（Booblean）若是设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；

2.sessStrage

1) 同源策略限制。若想在不一样页面之间对同一个sessionStorage进行操做，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)

2) 单标签页限制。sessionStorage操做限制在单个标签页中，在此标签页进行同源页面访问均可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一块儿发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制：不一样的浏览器存储的上限也不同，但大多数浏览器把上限限制在5MB如下。

js设置sessionStorage

// 保存数据到sessionStorage

.setItem('key','value');sessionStorage

// 从sessionStorage获取数据

var=.getItem('key');datasessionStorage

// 从sessionStorage删除保存的数据

.removeItem('key');sessionStorage

// 从sessionStorage删除全部保存的数据

.clear();sessionStorage

jQuery 操做sessionStorage

// 保存数据到sessionStorage

$.session.set('key', 'value')

// 从sessionStorage获取数据

$.session.get('key');

// 从sessionStorage删除保存的数据

$.session.remove('key');

// 从sessionStorage删除全部保存的数据

$.session.get('key');

3.localStorage

1）localStorage没有大小限制。限制的是浏览器对localStorage的限制约500万字符左右，个浏览器不一致。

2）localStorage隐私模式不可读取。浏览器在设置成无痕浏览或者隐私模式时localStorage不可读取。

3）localStorage不能被爬虫获取。本质是在读写文件，不要用它彻底取代URL传参，数据多的话会比较卡（Firefox会一次行将数据导入内存，想一想就感受吓人）。

4）localStorage没有时间限制。只要不手动清除缓存就会一直存在，若是后台设置有效时间，过时以后数据仍是存在不过不可用

JS下的操做方法

获取键值：localStorage.getItem(“key”)
设置键值：localStorage.setItem(“key”,”value”)
清除键值：localStorage.removeItem(“key”)
清除全部键值：localStorage.clear()
获取键值2：localStorage.keyName
设置键值2：localStorage.keyName = “value”

JQ下的操做方法（JS方法前加”window.”）

获取键值：window.localStorage.getItem(“key”)
设置键值：window.localStorage.setItem(“key”,”value”)
清除键值：window.localStorage.removeItem(“key”)
清除全部键值：window.localStorage.clear()
获取键值2：window.localStorage.keyName
设置键值2：window.localStorage.keyName = “value”

demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        // JS操做部分
        localStorage.JSa="JSA";
        document.write(localStorage.JSa);
        localStorage.setItem('JSb','&nbsp;JSB');
        document.write(localStorage.getItem('JSb'));
        // JQuery操做部分
        $(function(){
            window.localStorage.JQa="JQA";
            $("#a").text(window.localStorage.JQa);
            window.localStorage.setItem('JQb','JQB');
            $("#b").text(window.localStorage.getItem('JQb'));
        });
    </script>
</head>
<body>
    <p id="a"></p>
    <p id="b"></p>
</body>
</html>