當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

webStorage
2021-10-20 10:40:33

  1. 存儲內(nèi)容大小一般支持5M B左右(不同瀏覽器可能還不一樣)

  2. 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現(xiàn)本地存儲機制。

  3. 相關(guān)API:

1.xxxxxStorage.setItem('key', 'value');
該方法接受一個鍵和值作為參數(shù),會把鍵值對添加到存儲中,如果鍵名存在,則更新其對應(yīng)的值。
2.xxxxxStorage.getItem('person');
該方法接受一個鍵名作為參數(shù),返回鍵名對應(yīng)的值。
該方法接受一個鍵名作為參數(shù),并把該鍵名從存儲中刪除。
4.xxxxxStorage.clear()
該方法會清空存儲中的所有數(shù)據(jù)。
  1. 備注:

  2. SessionStorage存儲的內(nèi)容會隨著瀏覽器窗口關(guān)閉而消失。

  3. LocalStorage存儲的內(nèi)容,需要手動清除才會消失。

  4. xxxxxStorage.getItem(xxx)如果xxx對應(yīng)的value獲取不到,那么getItem的返回值是null。

  5. JSON.parse(null)的結(jié)果依然是null。

<body>
    <h2>localstorage</h2>
    <button onclick="saveData()">點我保存數(shù)據(jù)</button>
    <button onclick="getData()">點我讀取一個數(shù)據(jù)</button>
    <button onclick="deleteData()">點我刪除一個數(shù)據(jù)</button>
    <button onclick="deleteAllData()">清空所有數(shù)據(jù)</button>
    <script type="text/javascript">
        function saveData(){
            let p = {name:"張三",age:18}
            localStorage.setItem("msg","hello!")
            // JSON.stringify(p):把javascript對象轉(zhuǎn)換為一個字符串
            localStorage.setItem('person',JSON.stringify(p))
        } 
        function getData(){
            msg = localStorage.getItem("msg")
            person = localStorage.getItem("person")
            // JSON.parse(person):解析成javascript對象
            person= JSON.parse(person)
            console.log(msg)
            console.log(person)
        }
        function deleteData(){
            localStorage.removeItem("msg")
        }
        function deleteAllData(){
            localStorage.clear()
        }
    </script>
</body>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">點我保存數(shù)據(jù)</button>
    <button onclick="getData()">點我讀取一個數(shù)據(jù)</button>
    <button onclick="deleteData()">點我刪除一個數(shù)據(jù)</button>
    <button onclick="deleteAllData()">清空所有數(shù)據(jù)</button>
    <script type="text/javascript">
        function saveData(){
            let p = {name:"張三",age:18}
            sessionStorage.setItem("msg","hello!")
            // JSON.stringify(p):把javascript對象轉(zhuǎn)換為一個字符串
            sessionStorage.setItem('person',JSON.stringify(p))
        } 
        function getData(){
            msg = sessionStorage.getItem("msg")
            person = sessionStorage.getItem("person")
            // JSON.parse(person):解析成javascript對象
            person= JSON.parse(person)
            console.log(msg)
            console.log(person)
        }
        function deleteData(){
            sessionStorage.removeItem("msg")
        }
        function deleteAllData(){
            sessionStorage.clear()
        }
    </script>
</body>

## 組件的自定義事件

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >