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

webStorage
2021-10-20 10:40:33

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

  2. 瀏覽器端通過(guò) Window.sessionStorage 和 Window.localStorage 屬性來(lái)實(shí)現(xiàn)本地存儲(chǔ)機(jī)制。

  3. 相關(guān)API:

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

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

  3. LocalStorage存儲(chǔ)的內(nèi)容,需要手動(dòng)清除才會(huì)消失。

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

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

<body>
    <h2>localstorage</h2>
    <button onclick="saveData()">點(diǎn)我保存數(shù)據(jù)</button>
    <button onclick="getData()">點(diǎn)我讀取一個(gè)數(shù)據(jù)</button>
    <button onclick="deleteData()">點(diǎn)我刪除一個(gè)數(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對(duì)象轉(zhuǎn)換為一個(gè)字符串
            localStorage.setItem('person',JSON.stringify(p))
        } 
        function getData(){
            msg = localStorage.getItem("msg")
            person = localStorage.getItem("person")
            // JSON.parse(person):解析成javascript對(duì)象
            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()">點(diǎn)我保存數(shù)據(jù)</button>
    <button onclick="getData()">點(diǎn)我讀取一個(gè)數(shù)據(jù)</button>
    <button onclick="deleteData()">點(diǎn)我刪除一個(gè)數(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對(duì)象轉(zhuǎn)換為一個(gè)字符串
            sessionStorage.setItem('person',JSON.stringify(p))
        } 
        function getData(){
            msg = sessionStorage.getItem("msg")
            person = sessionStorage.getItem("person")
            // JSON.parse(person):解析成javascript對(duì)象
            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/

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