JavaScript local storage

Language 2023-07-01 12:53:56 views: null

Article Directory

提示：以下是本篇文章正文内容，下面案例可供参考

foreword

local storage

With the rapid development of the Internet, web-based applications are becoming more common and more complex. In order to meet various needs, large amounts of data are often stored locally. The HTML5 specification proposes related solutions plan.
In the past, we may store a large amount of data in the database, and frequently obtain and reuse it from the server, which is very troublesome, not to mention that the data of some functions does not need to be stored in the database.

local storage feature

  1. The data is stored in the user's browser.
  2. Easy to set up, read, and even page refresh without losing data.
  3. Large capacity, sessionStorage about 5M, localStorage about 20M.
    Don't underestimate 5M, it can store several million words.
  4. Only strings can be stored, and the object can be stored after JSON.stringfy() encoding.

1. Goals

  1. Can write sessionStorage data storage and acquisition
  2. Can write out the storage and acquisition of localStorage data
  3. be able to tell the difference between the two

2. Main learning content

1. window.sessionStorage

1.1 Features of sessionStorage

  1. The life cycle is to close the browser window.
  2. Data can be shared under the same window (page).
  3. Stored in the form of key-value pairs. If you want to store data in object form, you can use JSON.stringify(value)

1.2 Example of sessionStorage

1. Store data

sessionStorage.setItem(key,value)

1.1 Code example:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  
  <script>
  // 获取输入框和按钮元素
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
    })
  </script>
</body>

1.2 Example image:

Example diagram of stored data:

insert image description hereFor experimentation, open the console and find the application or Application → sessionStorage or session storage space.
My console is translated into Chinese.

It is also possible to test its features −The life cycle is to close the browser window.As long as you don't close the page window, it will always exist, and it doesn't matter if you refresh the page.

Refresh page example image:

insert image description here

2. Get data

sessionStorage.getItem(key)

2.1 Code example:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
    })
    // 获取 获取数据按钮的元素
    var get = document.querySelector('.get')
    // 注册绑定事件
    get.addEventListener('click', function() {
      
      
    // 点击后打印输出获得的本地数据
      console.log(sessionStorage.getItem('user'))
    })
  </script>

2.2 Example image:

Get the local storage data map:

insert image description here

3. Delete data

sessionStorage.removeItem(key)

3.1 Code example:

<body>
  <input type="text">
  <button class="remove">删除数据</button>
  <script>
    var inp = document.querySelector('input')
    // 给按钮注册绑定点击事件
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
    // 删除本地数据
      sessionStorage.removeItem('user')
    })
  </script>
</body>

3.2 Example image:

insert image description here

4. Clear all data

sessionStorage.clear()

4.1 Code example:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="clear">清空所有数据</button>

  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
      sessionStorage.setItem('pwd',val)
    })
    // 清空所有数据
    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
    // 清空所有数据
      sessionStorage.clear()
    })
  </script>
</body>

4.2 Example image:

insert image description here

1.3 sessionStorage complete example code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08-本地存储sesstionStorage</title>
</head>
<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>

  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
      sessionStorage.setItem('pwd',val)
    })
    // 获取数据
    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
      console.log(sessionStorage.getItem('user'))
    })
    // 删除数据
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
      sessionStorage.removeItem('user')
    })
    // 清空所有数据
    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
      sessionStorage.clear()
    })
  </script>
</body>
</html>

2. window.localStorage

2.1 Features of localStorage

  1. The lifetime is permanent, unless manually removed, the closing page will also exist.
  2. CanMulti-window (page) sharing(same browser can share).
  3. It is stored and used in the form of key-value pairs. If you want to store data in object form, you can use JSON.stringify(value)

2.2 Example of sessionStorage

1. Store data

localStorage.setItem(key,value)

1.1 Code example:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
    })
  </script>
</body>

1.2 Example image:

Example diagram of stored data:
insert image description here
Here we can experiment with the characteristics of localStorage-The lifetime is permanent, unless manually removed, the closing page will also exist.

Example image of reopening this page after closing it:

insert image description hereThis picture is a bit long. After reading this picture, it is true that the life cycle of localStorage always exists, unless we delete it manually.

2. Get data

localStorage.getItem(key)

2.1 Code example:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
    })
    // 获取数据
    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
    // 获取数据并在控制台中打印输出
      console.log(localStorage.getItem('user'))
    })
   </script>
<body>

2.2 Example image:

insert image description here
One is output here because I only wrote a console.log statement for input user

3. Delete data

localStorage.removeItem(key)

3.1 Code example:

<body>
  <input type="text">
  <button class="remove">删除数据</button>
  <script> 
    var inp = document.querySelector('input')
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
    // 删除数据
      localStorage.removeItem('user')
    })
  </script>
</body>

3.2 Example image:

insert image description here

4. Clear all data

localStorage.clear()

4.1 Code example:

<body>
  <input type="text">
  <button class="clear">清空所有数据</button>

  <script> 
    var inp = document.querySelector('input')

    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
    // 清空所有数据
      localStorage.clear()
    })
  </script>
</body>

4.2 Example image:

insert image description here
test canMulti-window (page) sharing(same browser can share).

Data stored in localStorage pages:

insert image description here

Let's change to other pages, and write a localStorage.getItem() input statement in other pages to see if we can get the value
example picture named test:

insert image description here
Write in another html page:

console.log(localStorage.getItem('test'));
is used to test multi-window (page) sharing (the same browser can share).

2.3 localStorage complete sample code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09-本地存储之localStorage</title>
</head>
<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>

  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
      localStorage.setItem('test',val)
    })

    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
      console.log(localStorage.getItem('user'))
    })

    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
      localStorage.removeItem('user')
    })

    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
      localStorage.clear()
    })
    
  </script>
</body>
</html>

Guess you like

Origin blog.csdn.net/weixin_46278178/article/details/127035976
Recommended
Ranking
Solve the problem that the Chinese display of the drawing using python matplotlib under the Linux system is displayed as a box
[Conference Call for Papers] The 5th International Conference on Civil Engineering, Environmental Resources and Energy Materials (CCESEM 2023)
4-yl Fast Fourier Transform
DataGirdView interlaced display color
[Docker implements test deployment CI/CD----Dingding alarm after the build is successful (7)]
[Asp.net core series] 6 the complete structure of a project in actual combat
The new version of OpenCenterV3 management background
Why can box plots detect outliers and what is the principle?
[Switch] jumbo frame Introduction
C++对象移动（3）——移动构造函数
Daily
More
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

Code World

© 2018 codetd.com