<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>web Storage</title>
    <!-- 
    1.存储内容大小一般支持5MB左右（不同浏览器可能不一样）
    2.浏览器通过Window.sessionStorage 和 Window.locaStorage 属性来实现本地存储机制
    3.相关API：
    1.XXXXXStorage.setItem('key','value');key=键  value=值。会把键值添加到存储中，如果健名存在，则更新对应值
    2.xxxxxStorage.getItem('porson') porson=键，返回value=值。
    3.xxxxxStorage.removeItem('key')key=键。删除对应键值
    4.xxxxxStorage.clear() 清空所有存储数据
    4.备注：
    SessionStorage存储内容会随着浏览器窗口关闭而消失
    LocalStorage存储的内容，需要手动清除才会消失
    xxxxxStorage.getItem(xxx)如果对应value获取不到，那么getItem的返回值是null
      JSON.parse(null)的结果依然是null
     -->
  </head>
  <body>


  </body>
</html>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sessionStorage</title>
  </head>
  <body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点击保存一个数据</button>
    <button onclick="readData()">点击读取一个数据</button>
    <button onclick="deleteData()">点击删除一个数据</button>
    <button onclick="deleteAllData()">点击清空一个数据</button> 
    <script>
      function saveData(){
         
        let p = {name:'张三',age:18}
        sessionStorage.setItem('msg','hello');
        sessionStorage.setItem('msg2',666);
        //转换为字符串
        sessionStorage.setItem('msg3',JSON.stringify(p))
      }
      function readData(){
        console.log(sessionStorage.getItem('msg'));
        console.log(sessionStorage.getItem('msg2'));
        const result = sessionStorage.getItem('msg3');
        console.log(JSON.parse(result))
      }
      function deleteData(){
        sessionStorage.removeItem('msg')
        sessionStorage.removeItem('msg2')
        sessionStorage.removeItem('msg3')
      }
      function deleteAllData(){
        sessionStorage.clear()
      }
    </script>
  </body>
</html>