web中的数据的简单常用的存储

web.jpeg

cookie 会话跟踪技术

• cookie是一种会话跟踪技术，用于在进行网页访问的时候，存储页面中的某些数据信息

在使用的时候有一些注意点

• 使用cookie来进行数据存储的大小有限制4KB
• 每个网页中存储cookie的个数（最多50）和每个网站中存储cookie的个数都有限制（200）
• cookie数据的过期时间(默认是当前会话，可以设置)
• cookie是不可以跨浏览器的
• cookie是不可以跨域的(跨域名)
• 一次只能设置一个数据，不能document.cookie = "age=18&psd=123";

设置和读取数据

<script>
    //读取和设置cookie
    //设置数据
    document.cookie = "uerName=cc";
    document.cookie = "age=18";
    //读取数据
    console.log(document.cookie);

//注意:当浏览器关闭的时候 上面的cookie就会 消失

   //设置过期时间
    var date = new Date();
    //设置日期是23号
    date.setDate(date.getDate() + 3);
    console.log(date.getDate());
    document.cookie = "color=red;expires="+date;
//当浏览器关闭的时候 上面的cookie就会持续到23号才关闭
</script>

image.png

简单的封装处理 曾|删|改|查|清空

• 使用闭包函数

 (function (window) {
        var Cookie = {
            //设置
            setCookie:function (key,value,count) {
                if (arguments.length == 2){
                    document.cookie = key+"="+value;
                }else  if (arguments.length == 3){
                    //设置过期时间
                    var date = new Date();
                    //设置日期 + count 天数
                    date.setDate(date.getDate() + count);
                    document.cookie = key+"="+value+";expires=" + date;
                }
            },
            getCookie:function (key) {
                var cookieStr = document.cookie;
                var arrm = cookieStr.split(";");
                for (var i = 0 ; i < arrm.length; i ++){
                    var data = arrm[i].split("=");
                    var keyStr = data[0];
                    //去除空格
                    keyStr = keyStr.replace(/^\s+|^s+$/g,"");
                    if (keyStr == key){
                        return data[1];
                    }
                }

                return  null;
            },
            removeCookie:function (key) {
                //利用过期时间删除
                //-1表示的事昨天
                this.setCookie(key,"",-1);
            },
            clearCookie:function () {
                var keys = this.keys();
                for (var i = 0; i < keys.length; i ++){

                    this.removeCookie(keys[i]);
                }
            },
            keys:function () {
                //获取所有的key
                var arrm = [];
                var cookieStr = document.cookie;
                var arrm = cookieStr.split(";");
                for (var i = 0 ; i < arrm.length; i ++){
                    var data = arrm[i].split("=");
                    //data[0] 除去空格
                    arrm.push(data[0].replace(/^\s+|^s+$/g,""));
                }

                return arrm;
            }

        };
        
        //给外界一个API
        window.Cookie = Cookie;

    })(window);

sessionStorage存储

• sessionStorage存储 是cookie的替代品，因为cookie的大小有限制。并且在发起网络请求的时候 cookie也是可以提交数据到服务器的
• 该技术和localStorage是h5推出的，因此在使用的时候，需要考虑到兼容性的问题
• 大小限制2M

//增加设置 数据
    window.sessionStorage.setItem("name","CC");
    window.sessionStorage.setItem("age","123");

    //获取数据

    console.log(window.sessionStorage.getItem("name"));
    console.log(window.sessionStorage.getItem("age"));
    //删除
    window.sessionStorage.removeItem("age")
    console.log(window.sessionStorage.getItem("age"));
    //清空
    window.sessionStorage.clear();
//sessionStorage 可以看成对象 动态的添加属性 设置值
sessionStorage.des = "这是一个描述";
 sessionStorage.sayHello = "说你好，哈哈";
//也是设置数据 存储的值

localStorage 本地存储

• 没有大小限制
• 没有时间限制

 //设置数据方式一
    localStorage.setItem("name","cc");
    localStorage.setItem("age","18");
    //设置数据方式二
    localStorage.height = "1.78";
    localStorage.score = "90";
    //获取数据
    localStorage.getItem("name");
    localStorage.getItem("age");
    
    //移除数据
    localStorage.removeItem("name");
    
    //清空数据
    localStorage.clear();