当前位置：网站首页>Local storage sessionstorage

Local storage sessionstorage

2022-07-19 08:01:00 【Green hedgerow bamboo maple】

Local storage features ：
1. The data is stored in the user's browser

2. Convenient setting and reading , Page refresh will not lose data

3. Large capacity ,sessionStorage about 5M,locoalStorage about 20M

4. Only book string can be saved , You can put objects JSON.stringfy() Store after encoding

window.sessionStorage

1. The lifecycle is to close the browser window

2. Data can be shared in the same window

3. Store... As a key value pair

Set up the data 

sessionStorage.setItem(key,value)

get data 

sessionStorage.getItem(key)

Remove data 

sessionStorage.removeItem(key)

Clear all data 

sessionStorage.clear()
  <input type="text">
  <button class="set"> Store the data </button>
  <button class="get"> get data </button>
  <button class="remove"> Delete data </button>
  <button class="del"> Clear all data </button>
 <script>
    var input = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.del');
    set.addEventListener('click', function () {
      // After clicking, you can store the value of the form 
      var value = input.value;
      sessionStorage.setItem('uname', value);
    });
    get.addEventListener('click', function () {
      console.log(sessionStorage.getItem('uname'));
    })
    remove.addEventListener('click', function () {
      sessionStorage.removeItem('uname');
    })
    del.addEventListener('click', function () {
      sessionStorage.clear();
    })
  </script>

window.localStorage

1. The life cycle takes effect permanently , Unless you delete

2. Can be in multiple windows （ page ） share （ The same browser can share ）

3. Store and use in the form of key value pairs

Store the data 

localStorage.setItem(key,value)

get data 

localStorage.getItem(key)

Remove data 

localStorage.remove(key)

Clear all data 

localStorage.clear()
 <input type="text">
  <button class="set"> Store the data </button>
  <button class="get"> get data </button>
  <button class="remove"> Delete data </button>
  <button class="del"> Clear all data </button>
<script>
    var input = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.del');
    set.addEventListener('click', function () {
      localStorage.setItem('uname', input.value);
    })
    get.addEventListener('click', function () {
      localStorage.getItem('uname');
    })
    remove.addEventListener('click', function () {
      localStorage.removeItem('uname');
    })
    del.addEventListener('click', function () {
      localStorage.clear();
    })
  </script>

Remember the user name 

<body>
  <input type="text" id="username">
  <input type="checkbox" name="" id="remember"> Remember the user name 
  <script>
    var username = document.querySelector('#username');
    var check = document.querySelector('#remember');
    if (localStorage.getItem('username')) {
      username.value = localStorage.getItem('username');
      remember.checked = true;
    }
    check.addEventListener('change', function () {
      if (this.checked) {
        localStorage.setItem('username', username.value);
      } else {
        localStorage.removeItem('username');
      }
    })
  </script>

</body>

原网站

版权声明
本文为[Green hedgerow bamboo maple]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170621067819.html

边栏推荐

猜你喜欢

随机推荐