浏览器本地储存方式有哪些？cookie、localStorage、sessionStorage

系统管理员 2021-01-12 06:21 784阅读 0赞

现阶段，浏览器提供的储存方式常用的有三种,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");