• [学习记录] SessionStorage与LocalStorage


    SessionStorage与LocalStorage都是可以用来创造本地存储的键值对,实现校验等等。

    核心方法如下

    创建键值对

    window.sessionStorage.setItem("key","value");

    获取值

    var   getvalue=window.sessionStorage.getItem("key");

    删除指定键

    window.sessionStorage.removeItem("key");

    清空所有值

    window.sessionStorage.clear();

    然后把上面的session换成local就是localstorage对应的函数了

     一下是一个简单的例子,用户可以点击create创建一个记录,点击check查看是否已存在记录,点击delete删除记录,可以看到当网页关闭的时候sessionstorage存储的数据丢失了,但localstorage仍然保存。

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8">
     5     <title>honki</title>
     6   </head>
     7   <body>
     8     <div> hello this is ss</div>
     9     <div id="whoss">who are you</div>
    10     <button type="button" name="button1ss" onclick="createss()"> create </button>
    11     <button type="button" name="button2ss" onclick="checkss()"> check </button>
    12     <button type="button" name="button3ss" onclick="delss()"> delete </button>
    13 
    14     <div> hello this is lo</div>
    15     <div id="wholo">who are you</div>
    16     <button type="button" name="button1lo" onclick="createlo()"> create </button>
    17     <button type="button" name="button2lo" onclick="checklo()"> check </button>
    18     <button type="button" name="button3lo" onclick="dello()"> delete </button>
    19     <!-- built files will be auto injected -->
    20   </body>
    21   <script type="text/javascript">
    22   function createss(event){
    23     window.sessionStorage.removeItem('id');
    24     window.sessionStorage.setItem('id',"wang");
    25     document.getElementById('whoss').innerHTML='you are wang';
    26   }
    27 
    28   function checkss(event){
    29     if (window.sessionStorage.getItem('id')==='wang')
    30     {
    31       document.getElementById('whoss').innerHTML='you are wang';
    32     }
    33     else
    34     {
    35       document.getElementById('whoss').innerHTML='sorry please create';
    36     }
    37   }
    38 
    39   function delss(event){
    40     window.sessionStorage.clear();
    41     document.getElementById('whoss').innerHTML='who are you';
    42   }
    43 
    44   function createlo(event){
    45     window.localStorage.removeItem('id');
    46     window.localStorage.setItem('id',"wang");
    47     document.getElementById('wholo').innerHTML='you are wang';
    48   }
    49 
    50   function checklo(event){
    51     if (window.localStorage.getItem('id')==='wang')
    52     {
    53       document.getElementById('wholo').innerHTML='you are wang';
    54     }
    55     else
    56     {
    57       document.getElementById('wholo').innerHTML='sorry please create';
    58     }
    59   }
    60 
    61   function dello(event){
    62     window.localStorage.clear();
    63     document.getElementById('wholo').innerHTML='who are you';
    64   }
    65   </script>
    66 </html>
  • 相关阅读:
    MPLS 知识要点1
    ISIS的SSN和SRM标志
    对比ISIS和OSPF
    ISIS帧中继实验
    ISIS 认证实验
    ISIS数据库同步
    ISIS Lab 路由泄露
    ISIS Lab 重分布直连
    32、端口有效范围是多少到多少?
    33、为何需要把 TCP/IP 协议栈分成 5 层(或7层)?开放式回答。
  • 原文地址:https://www.cnblogs.com/trickofjoker/p/11005590.html
Copyright © 2020-2023  润新知