美文网首页
本地存储和以及cookie

本地存储和以及cookie

作者: 羊驼驼驼驼 | 来源:发表于2017-02-22 11:24 被阅读0次
    次cookie非彼cookie

    一 . jquery.cookie插件操作的cookie:

    1.cookie  网站,为了实现某些功能,把一些数据存储到用户的本地计算机。

    1)存,种,写(cookie 是同源的,源头是一个——同一个域名下):

    $.cookie('cookename','cookievalue');

    Expires/Max - Age:表示的就是cookie的过期时间:默认值—— Session(会话cookie —— 会话结束后(浏览器关闭)就消失);

    $.cookie('cookie名字','cookie值',选项);

    选项-》多个选项,JSON格式

    *设置过期时间:

    使用jquery.cookie插件来设置cookie的时候,过期时间,和现在的时间相差8小时。 expires:数字--天数,时间对象--灵活设置;

    例如:$.cookie('name',value,{

    expires: 天数

    });

    *设置路径:

    如果cookie路径path不一样:父读子读不到 子读父能读到

    通常,一个网站,只用一套cookie

    例如:$.cookie(name,value,{

    expires:天数,

    path: '/'  ——// 通常情况下 设置为网站的根路径

    });

    2)修改一个cookie的值:

    和设置的方法一样:$.cookie('name','新的value',{

    path: //  如果当前程序的path和cookie的path不一致,那么这里一定要指定path参数

    });

    3)删除一个cookie:

    把过期时间设置成负值

    4)使用cookie的时候有几点注意:

    1.必须是服务环境

    2.不安全 , 因为它存在了用户的本地机器上(临时存储)

    3.过期时间:

    默认:  session ——  会话时间(会话结束、浏览器关闭,cookie消失)

    4.大小、容量 ,  一般 4K  左右,有的浏览器还有条数的限制

    —— 珍贵的资源

    5.不管看到的是什么,其值都是String类型(* 既然cookie里存的都是字符串,那么在存的时候就明确的写成字符串,避免系统做对应的类型转换)

    例如:$.cookie('a',{a:1,b:1}); ——  存的是  object Object  ×

    $.cookie('a','{a:1,b:1}');  √

    2.本地存储

    html5,提供了一个新东西:localStorage(永久存储) sessionStorage(会话)

    容量:5M (如果存的内存比较大,占内存比较严重,导致网页变卡)

    写:

    var storage=window.localStorage

    storage.setItem('name','value');

    storage.a='111';

    storage[a]='aaa';

    读:

    storage.getItem();

    删除:

    全部删除:storage.clear();

    删除一条:storage.removeItem('name');

    循环所有的key:

    storage.keys(i);

    访问所有的 localSorage 里的东西:

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

    alert(window.localStorage.key(i));

    }

    3.sessionStorage:用法和  localStorage  的用法完全一致。

    4.cookie localStorage sessionStorage 同源(同一个域名) 在同一个域名下的数据可以互相访问

    5.localStorage的使用注意事项:

    1、突破了cookie大小限制,  5M —— 本地数据库

    2、html5支持这种写法,要求 ie8 以上的浏览器

    3、取出来的永远是字符串

    4、存储的内容非常大的时候,占内存严重,使网页的访问变慢

    5、不能被爬虫抓取

    5.序列化(ES5):

    把一个对象转化成字符串,ES5提供的方法:JSON.stringify(字符串);

    JSON.stringify({"a":1,"b":2}说)

    6.反序列化(ES5):

    把字符串变成对象

    string.parse('{"a":1,"b":12}')

    原生JS操作的cookie:

    document.cookie 和 docum9ent.title(每次都覆盖前一次的值) 类似

    写:

    document.cookie='aaa';---只写了value=aaa,没有name; ×

    document.cookie='name=aaa'; √

    设置path(根路径):

    document.cookie='textPath=abc;path=/';

    设置expires(过期时间):

    一天后过期:

    var oDate=new Date();

    oDate.setDate(oDate.getDate()+1);

    document.cookie='textPath=abc;path=/;expires='+oDate;

    一分钟后过期:

    var oDate=new Date();

    oDate.setMinutes(oDate.getMinutes()+1)

    document.cookie='textPath=abc;path=/;expires='+oDate;(相差八小时)

    document.cookie='textPath=abc;path=/;expires='+oDate.toUTCString();/oDate.toGMTString();

    *封装set:

    function setCookie(name,value,iDay){

    var str=name+'='+value+';path=/'

    if(iDay){

    var oDate=new Date();

    oDate.setDate(oDate.getDate()+iDay);

    str+=';expires='+oDate.toUTCString();

    }

    document.cookie=str;

    }

    setCookie('hello',111,2);

    删除cookie: setCookie('hello','',-2);

    读:

    document.cookie---每个cookie之间是用“分号+空格”来分隔的

    name=123; test=abc;

    获取一个cookie:

    例如:

    var arr=document.cookie.split('; ');

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

    var arr2=arr[i].split('=');

    if(arr2[0]==name){

    alert(arr2[1])}

    }

    相关文章

      网友评论

          本文标题:本地存储和以及cookie

          本文链接:https://www.haomeiwen.com/subject/ogvpwttx.html