浏览器本地储存方式有哪些？cookielocalStoragesessionStorage

Posted 2020-09-04 成都苏天天

现阶段，浏览器提供的储存方式常用的有三种,cookie、localStorage、sessionStorage

1、cookie 

概念：cookie 是浏览器中用于保存少量信息的一个对象

基本特征：

1）以域名为单位的，每个网站的cookie都保存在此网站的域名下，当下一次访问该网站的时候，就可以通过cookie访问保存的消息

2）每个浏览器保存cookie的位置不同，都保存在浏览器内部，可以通过相应的操作查看

3）每个浏览器保存cookie的数量限制不同，一般每个网站下不大于50个，不大于4k。

4）每个网站下的cookie是以分号+空格的形式串联起来的

5）一般直接保存的cookie会在浏览器退出时清空，如果要长期保存，就得设置过期时间，使用expires=Date,卸载设置的cookie后面，使用分号+空格隔开

获取cookie：通过document.cookie可以获取该域名下的所有的cookie组成的字符串，格式为名=值得形式，中间由分号+空格分开，如：“name=张三; age=23”

获取之后使用字符串操作拆分即可得到对应的值

以下是获取cookie的封装方法

//获取cookie的方法
    function getCookie(cookieName){
        var cookies = document.cookie.split("; ");
        for(var i=0; i<cookies.length; i++){
            var arr =  cookies[i].split("=");
            if(arr[0] == cookieName){
                return arr[1];
            }
        }
    }

 

设置cookie：通过document.cookie="名=值"的方式即可设置cookie，例如：document.cookie = "name=张三; expires="+new Date(2017,9);

如果要设置过期时间，就在值后面加 分号+空格+expires=过期时间对象/过期时间字符串。

以下是分装的设置cookie的方法

//设置cookie的方法
    function setCookie(key,val,time){ //tiem传入保存的天数 比如说30天过期  
        var nowTime = new Date();

        nowTime.setDate( nowTime.getDate()+time );
        //时间有GMT/UTC世界时间和北京时间相差8小时，而浏览器设置的时候是按标准时间设置的，所以需要转化。
        document.cookie = key+"="+ val +"; expires="+nowTime.toUTCString();
    }

 

删除cookie相对比较简单，只需要将值清空，并且将过期时间设置为过去即可

封装的删除cookie的方法

//清除cookie，1、讲值清空，2、设置过期时间比现在还早
    function deleteCookie(key){
        setCookie(key,"",-1);
    }

 

2、localStorage与sessionStorage

特点：

1）localStorage和sessionStorage都具有相同的操作方法

2）localStorage长期存放，sessionStorage浏览器关闭时清空

 

设置值，使用setItem：

//设置值
localStorage.setItem("name","张三");
sessionStorage.setItem("name","李四");

 

获取值，使用getItem

localStorage.getItem("name");

sessionStorage.getItem("name");

 

删除值，使用removeItem

localStorage.removeItem("name");

sessionStorage.removeItem("name");

 

删除所有的值，使用.clear

localStorage.clear();
sessionStorage.clear();