localStorage sessionStorage Cookie 区别和用法

迈不过友情╰ 2021-12-17 00:21 311阅读 0赞

原文: https://blog.csdn.net/shenxianhui1995/article/details/93010158

## 区别 ##

**localStorage:** localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage **除非主动删除数据，否则数据永远不会消失**

*  **sessionStorage:** sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage **在关闭了浏览器窗口后就会被销毁**。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的
 *  **cookie:** cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是**不能储存大数据且不易读取**
 *  ## 建议 ##
    
    由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适
    
    原因:
    
     *  sessionStorage 可以保证打开页面时 sessionStorage 的数据为空
     *  每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据
    
    ## 用法 ##
    
    #### 一. localstorage 和 sessionstorage ####
    
    1.  首先要判断浏览器是否支持 localStorage / sessionStorage  
        比如判断 localStorage
    
        if ( window.localStorage) { 
              alert( '浏览支持 localStorage'); 
              } else { 
              alert( '浏览暂不支持 localStorage'); 
              }
    
    1.  localStorage 和 sessionStorage 都具有相同的操作方法，例如 `setItem()`、`getItem()` 和 `removeItem()` 等
    
     *  **储存数据**  
        用途: 将 `value` 存储到 `key` 字段  
        用法: `setItem( key, value)`  
        代码示例
    
        sessionStorage.setItem( 'key', 'value'); 
              localStorage.setItem( 'key', 'value');
    
     *  **取出数据**  
        用途: 获取指定 `key` 本地存储的值  
        用法: `getItem(key)`  
        代码示例
    
        sessionStorage.getItem( 'key'); 
              localStorage.getItem( 'key');
    
     *  **修改数据**  
        用途: 修改指定 `key` 本地存储的值  
        用法: `setItem(key)`  
        代码示例
    
        sessionStorage.setItem( 'key', 'newVal'); 
              localStorage.setItem( 'key', 'newVal');
    
     *  **删除数据**  
        用途: 删除指定 `key` 本地存储的值  
        用法: `getItem(key)`  
        代码示例
    
        sessionStorage.removeItem( 'key'); 
              localStorage.removeItem( 'key');
    
     *  **清除数据**  
        用途: 清除所有本地存储的数据  
        用法: `clear()`  
        代码示例
    
        sessionStorage .clear(); 
              localStorage .clear();
    
    #### 二. [cookie][] ####
    
     *  **储存数据**
    
        window.document.cookie = 'xxx';
    
     *  **取出数据**
    
        document.cookie
    
        </div>
                          </div>

[cookie]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.runoob.com%2Fjs%2Fjs-cookies.html