HTML5 Web 存储（localStorage和sessionStorage）

HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。

localStorage

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

 
 

   
   

    
    

   
   
   
   

    
    
        
     
     // 1、保存数据到本地
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 第一个参数是保存的变量名，第二个是赋给变量的值
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             localStorage.setItem(
     
     'Author', 
     
     'local');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 2、从本地存储获取数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             localStorage.getItem(
     
     'Author');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 3、从本地存储删除某个已保存的数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             localStorage.removeItem(
     
     'Author');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 4、清除所有保存的数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             localStorage.clear();
    
    
   
   
 
 

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

 
 

   
   

    
    

   
   
   
   

    
    
        
     
     // 1、保存数据到本地
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 第一个参数是保存的变量名，第二个是赋给变量的值
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             sessionStorage.setItem(
     
     'Author', 
     
     'session');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 2、从本地存储获取数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             sessionStorage.getItem(
     
     'Author');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 3、从本地存储删除某个已保存的数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             sessionStorage.removeItem(
     
     'Author');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     // 4、清除所有保存的数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             sessionStorage.clear();
    
    
   
   
 
 

复杂数据存储

上面都是对于简单的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，直接存储是不行的

错误的存储：

 
 

   
   

    
    

   
   
   
   

    
    
    
     
     var user = {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     username: 
     
     'liu',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     password: 
     
     '123456'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         };
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         sessionStorage.setItem(
     
     'user', user);
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     console.log(sessionStorage.getItem(
     
     'user'));
    
    
   
   
 
 

这个时候，就需要转换数据格式。

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象

 
 

   
   

    
    

   
   
   
   

    
    
    
     
     var user = {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     username: 
     
     'liu',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     password: 
     
     '123456'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         };
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         user = 
     
     JSON.stringify(user);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         sessionStorage.setItem(
     
     'user', user);
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     var account = sessionStorage.getItem(
     
     'user');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     console.log(account);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         account = 
     
     JSON.parse(account)
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     console.log(account);
    
    
   
   
 
 

•                     <li class="tool-item tool-active is-like  tool-clicked"><a href="javascript:;"><svg class="icon" aria-hidden="true">
                          <use xlink:href="#csdnc-thumbsup"></use>
                      </svg><span class="name">点赞</span>
                      <span class="count">6</span>
                      </a></li>
                      <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-csdnc-Collection-G"></use>
                      </svg><span class="name">收藏</span></a></li>
                      <li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;1582594662_002&quot;}"><svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-csdnc-fenxiang"></use>
                      </svg>分享</a></li>
                      <!--打赏开始-->
                                              <!--打赏结束-->
                                              <li class="tool-item tool-more">
                          <a>
                          <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                          </a>
                          <ul class="more-box">
                              <li class="item"><a class="article-report">文章举报</a></li>
                          </ul>
                      </li>
                                          </ul>
              </div>
                          </div>
          <div class="person-messagebox">
              <div class="left-message"><a href="https://blog.csdn.net/sleepwalker_1992">
                  <img src="https://profile.csdnimg.cn/3/7/6/3_sleepwalker_1992" class="avatar_pic" username="sleepwalker_1992">
                                          <img src="https://g.csdnimg.cn/static/user-reg-year/2x/5.png" class="user-years">
                                  </a></div>
              <div class="middle-message">
                                      <div class="title"><span class="tit"><a href="https://blog.csdn.net/sleepwalker_1992" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">sleepwalker_1992</a></span>
                                          </div>
                  <div class="text"><span>发布了199 篇原创文章</span> · <span>获赞 214</span> · <span>访问量 48万+</span></div>
              </div>
                              <div class="right-message">
                                          <a href="https://bbs.csdn.net/topics/395527013" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板
                      </a>
                                                          <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                  </div>
                          </div>
                  </div>