当前位置：网站首页>Browser local storage webstroage

Browser local storage webstroage

2022-07-24 19:53:00 【_ ocean】

List of articles

localStorage The local store
sessionStorage
webstroage
Two dots

localStorage The local store

localStroage The data of needs to be deleted manually , Even if you close the browser, the data will not disappear , When will you delete it , When does the data disappear
Delete manually ： Such as clearing the cache

localStorage Of 4 Operations ： Store the data 、 get data 、 Delete data 、 Empty data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()"> Click me to save a data </button>
    <button onclick="readData()"> Click me to read a data </button>
    <button onclick="deleteData()"> Click me to delete a data </button>
    <button onclick="deleteAllData()"> Click I clear all data </button>


    <script type='text/javascript'> function saveData (){
       // localStorage The keys and values stored in are of string type , //  Even if the incoming is number type , It will also be converted to string type , Default call toString Method  //  So if you want to pass the object, you can call JSON.stringify Method , Convert the object to json character string （json Strings can display the contents of objects , But the essence is also a string ） const p ={
      id:"123",name:'yang',age:18} localStorage.setItem('msg','hello') localStorage.setItem('hello',123) localStorage.setItem('person',JSON.stringify(p)) } function readData (){
       console.log(localStorage.getItem('msg')) console.log(localStorage.getItem('hello')) // JSON.parse(null)  The result is still  null console.log(JSON.parse(localStorage.getItem('person'))) } function deleteData (){
       localStorage.removeItem('msg') } function deleteAllData (){
       localStorage.clear() } </script>
</body>
</html>

localStorage View ：
Insert picture description here

sessionStorage

sessionStorage As soon as the data browser in is closed
sessionStorage Of 4 Operations ： Store the data 、 get data 、 Delete data 、 Empty data （ and localStroage equally ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()"> Click me to save a data </button>
    <button onclick="readData()"> Click me to read a data </button>
    <button onclick="deleteData()"> Click me to delete a data </button>
    <button onclick="deleteAllData()"> Click I clear all data </button>


    <script type='text/javascript'> function saveData (){
       // sessionStorage The keys and values stored in are of string type , //  Even if the incoming is number type , It will also be converted to string type , Default call toString Method  //  So if you want to pass the object, you can call JSON.stringify Method , Convert the object to json character string （json Strings can display the contents of objects , But the essence is also a string ） const p ={
      id:"123",name:'yang',age:18} sessionStorage.setItem('msg','hello') sessionStorage.setItem('hello',123) sessionStorage.setItem('person',JSON.stringify(p)) } function readData (){
       console.log(sessionStorage.getItem('msg')) console.log(sessionStorage.getItem('hello')) // JSON.parse(null)  The result is still  null console.log(JSON.parse(sessionStorage.getItem('person'))) } function deleteData (){
       sessionStorage.removeItem('msg') } function deleteAllData (){
       sessionStorage.clear() } </script>
</body>
</html>

View the data ：
Insert picture description here

webstroage

webstroage when localStorage and sessionStorage Is called .

The storage content size generally supports 5MB about ( Different browsers may be different )
Browser side through Window.sessionStorage and Window.localStorage Property to implement the local storage mechanism .
SessionStorage The stored content will disappear as the browser window closes .
LocalStorage Stored content , It needs to be cleared manually to disappear .