Local storage sessionStorage&localStorage

With the rapid development of the Internet, web-based applications are becoming more and more common and becoming more and more complex. In order to meet various needs, large amounts of data are often stored locally. The HTML5 specification proposes relevant solutions. plan.

Local storage features

• Data stored in userBrowser

• Easy to set up, read, and even refresh the page without losing data

• Large capacity, sessionStorage is about 5M, localStorage is about 20M

• Only strings can be stored, and the object can be stored after encoding JSON.stringify0

window.sessionStorage

• The life cycle isClose the browser window
• Inthe same window (page)Data can be shared
• Stored in the form ofkey-value pairs

Storing data

sessionStorage.setItem(key,value)

retrieve data

sessionStorage.getItem(key)

delete data

sessionStorage.removeItem(key)

Delete all data

sessionStorage.clear()

window.localStorage

• Life cyclePermanently effective, unless manually deleted, the closed page will also exist
• CanMulti-window (page) sharing (the same browser can be shared)
• Stored in the form ofkey-value pairs

 Storing data

localStorage.setItem(key,value)

retrieve data

localStorage.getItem(key)

delete data

localStorage.removeItem(key)

Delete all data

localStorage.clear()

---

Application - Remember Username

If Remember username is checked, the next time the user opens the browser, the last logged-in username will be automatically displayed in the text box.

1. Save data and use local storage
2. Close the page and display the user name, so localStorage is used
3. Open the page and first determine whether there is this user name. If so, display the user name in the form and check the check box.