cookie,localstorage和sessionstorage

   日期:2020-05-22     浏览:98    评论:0    
核心提示:cookie的概念cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件,它可以包含相关用户的信息。无论何时用户链接到服务器,Web站点都可以访问Cookie信息。比如:自动登录、记住用户名,记住一些和用户相关的信息等cookie的特点-禁用cookie后,无法正常注册登陆;-cookie是与浏览器相关的,不同浏览器之间所保存的cookie也是不能互相访问的;-cookie可以被删除。因为每个cookie都是硬盘上的一个文件;-cookie安全性不够高-xss攻击c..json
  • cookie的概念

    cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件,它可以包含相关用户的信息。无论何时用户链接到服务器,Web站点都可以访问Cookie信息。比如:自动登录、记住用户名,记住一些和用户相关的信息等
  • cookie的特点

    -禁用cookie后,无法正常注册登陆;
    -cookie是与浏览器相关的,不同浏览器之间所保存的cookie也是不能互相访问的;
    -cookie可以被删除。因为每个cookie都是硬盘上的一个文件;
    -cookie安全性不够高-xss攻击
  • cookie的使用

    -cookie的添加-
    键值对,自定义键名,值一定是字符串

    存储数组和对象:
    带有过期时间的cookie:

    -cookie的获取-
    如果cookie不存在,输出undefined;
    封装cookie,实现传入key,输出value ,已存入:me=张三; age=100; sex=男, 每一项继续进行转数组name=张三,age=100,sex=男
    第一次 newarr = [name,张三]
    第二次 newarr = [age,100]
    第三次 newarr = [sex,男]
    let newarr = arr[i].split(’=’);
    newarr[0]
    传入的值和数组的第一项(key)进行比较,满足条件输出newarr[1]的value。

cookie封装:

    let cookie = {
        set: function(name, value, days) {
            let d = new Date();
            d.setDate(d.getDate() + days)
            document.cookie = `${name}=${encodeURIComponent(value)};expires=${d};path=/`;
        },
        get: function(name) {
            var arr = document.cookie.split('; ');
            var newarr = [];
            for (let i = 0; i < arr.length; i++) {
                newarr[i] = arr[i].split('=');
            }
            for (let value of newarr) {
                if (name == value[0]) {
                    console.log(decodeURIComponent(value[1]));
                }
            }
        },
        unset: function(name) {
            this.set(name, '', -1)
        }
    }

    cookie.set('姓名', '张三',10);
    cookie.set('xingbie', 'xhahahha', 10);
    cookie.get('姓名');//'张三'
  • cookie,locastorage,sessionstorage区别

    locastorage,sessionstorage html5新增的;
    localStorage拓展了cookie的4K限制,永久存储,除非手动删除;
    cookie可以自由设定过期时间;
    cookie需要服务器。

    -localstorage的特点-

    1、localStorage拓展了cookie的4K限制,永久存储,除非手动删除。
    2、localStorage会将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,但只有在高版本的浏览器中才支持的。
    3、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。
    4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
    5、不同的浏览器本地存储不能相互进行访问。
    6、sessionstorage会话结束就消失。

		**localStorage存储:**
        //点操作符存储
        window.localStorage.name = 'zhangsan';
        //中括号方式存储[]
        window.localStorage['age'] = 100;
        //利用内置的方法存储
        window.localStorage.setItem('sex', '男');
        存储对象
        let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        localStorage.setItem('objdata', JSON.stringify(obj));

        **localStorage获取**
        console.log(localStorage.name);
        console.log(localStorage['age']);
        console.log(localStorage.getItem('objdata'));
        console.log(JSON.parse(localStorage.getItem('objdata')));//eval()


        **localStorage删除**
        localStorage.removeItem('name');
        localStorage.clear();//删除所有

        **sessionStorage:会话结束**//sessionStorage属于当会话结束的时候,存储的值会被清空
        sessionStorage.setItem('a', 10000);

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服