vue项目使用cookie、localStorage和sessionStorage进行储存数据

Dear 丶 2021-09-18 15:04 446阅读 0赞

原文：[https://blog.csdn.net/mf\_717714/article/details/84233625][https_blog.csdn.net_mf_717714_article_details_84233625]  
**一，cookie的使用**

1，首先加载模块

npm i js-cookie -S
    
     
      
     
      
       2，在使用cookie的页面上进行引入 import Cookies from 'js-cookie'
    
       
         
       
         
          3，使用方法 创建一个在整个网站上有效的Cookie Cookies.set('name', 'value');
    
         
            
         
            
             创建一个从现在起7天后过期的cookie，在整个站点上有效： Cookies.set('name', 'value', { expires: 7 });
    
           
               
           
               
                创建一个过期的cookie，对当前页面的路径有效： Cookies.set('name', 'value', { expires: 7, path: '' });
    
             
                  
             
                  
                   读取cookie： Cookies.get('name'); // => 'value'
    Cookies.get('nothing'); // => undefined
    
               
                     
               
                     
                      阅读所有可见的Cookie： Cookies.get(); // => { name: 'value' }
    
                 
                        
                 
                        
                         删除cookie： Cookies.remove('name');
    
                   
                           
                   
                           
                            删除对当前页面路径有效的cookie： Cookies.set('name', 'value', { path: '' });
    Cookies.remove('name'); // fail!
    Cookies.remove('name', { path: '' }); // removed!
    
                     
                              
     重要！删除cookie时，您必须传递用于设置cookie的完全相同的路径和域属性，除非您依赖于默认属性。
    
    注意：删除未存在的cookie不会引发任何异常，也不会返回任何值
     二，localStorage的使用
     注：vue下使用localStorage和H5使用localStorage的方法是一致的，不需要引入插件
     1，储存
     //数据
    localStorage.setItem('userName','HelloWeen');
    
                      
                               
                      
                               
                                2，获取 localStorage.getItem('userName')
    
                        
                                  
                        
                                  
                                   3，删除 localStorage.removeItem('userName');
    
                          
                                     
                          
                                     
                                      4，localStorage可以储存JSON对象，且没有时间限制的数据存储 ，除非主动删除。 //数组
    var arr=[1,2,3];
    localStorage.setItem("temp",arr); //会返回1,2,3
    console.log(typeof localStorage.getItem("temp"));//string
    console.log(localStorage.getItem("temp"));//1,2,3
    
                            
                                        
                            
                                        
                                         5，localStorage.setItem() 不会自动将Json对象转成字符串形式 var user= {"userName": "hello","age": 2};
    typeof localStorage.getItem("user");//也会返回String
    localStorage.setItem("user", user);//但是返回[object Object],
    
                              
                                           
                              
                                           
                                            6，用localStorage.setItem()正确存储JSON对象方法是： 存储前先用JSON.stringify()方法将json对象转换成字符串形式 JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串

获取的时候要将之前存储的JSON字符串使用JSON.parse()先转成JSON对象再进行操作

sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。

sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。

sessionStorage.clear() //清除 sessionStorage 对象所有的项。

*  2，存储数据
    
    2.1 采用setItem()方法存储
    
        sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
        
          
            
          
            
             2.2 通过属性方式存储 sessionStorage['testKey'] = '这是一个测试的value值';
        
            
               
            
               
                2.3 存储Json对象 sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。 var userEntity = {
            name: 'tom',
            age: 22
        };

// 存储值：将对象转换为Json字符串  
sessionStorage.setItem(‘user’, JSON.stringify(userEntity));

// 取值时：把获取到的Json字符串转换回对象  
var userJsonStr = sessionStorage.getItem(‘user’);  
userEntity = JSON.parse(userJsonStr);  
console.log([userEntity.name][]); // => tom

*  3,读取数据
    
    3.1 通过getItem()方法取值
    
        sessionStorage.getItem('testKey'); // => 返回testKey对应的值
        
          
            
          
            
             3.2 通过属性方式取值 sessionStorage['testKey']; // => 这是一个测试的value值
        
            
               
            
               
                        </div>
        					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
                    </div>

[https_blog.csdn.net_mf_717714_article_details_84233625]: https://blog.csdn.net/mf_717714/article/details/84233625
[userEntity.name]: http://userEntity.name