美文网首页
浏览器缓存

浏览器缓存

作者: 5cc9c8608284 | 来源:发表于2022-03-17 21:12 被阅读0次

    1.LocalStorage
    LocalStorage存储的内容,需要手动清除才会消失。
    相关API操作:

    <h2>localStorage</h2>
            <button onclick="saveData()">点我保存一个数据</button>
            <button onclick="readData()">点我读取一个数据</button>
            <button onclick="deleteData()">点我删除一个数据</button>
            <button onclick="deleteAllData()">点我清空一个数据</button>
    
            <script type="text/javascript" >
                let p = {name:'张三',age:18}
    
                function saveData(){
                    localStorage.setItem('msg','hello!!!')
                    localStorage.setItem('msg2',666)
                    localStorage.setItem('person',JSON.stringify(p))
                }
                function readData(){
                    console.log(localStorage.getItem('msg'))
                    console.log(localStorage.getItem('msg2'))
    
                    const result = localStorage.getItem('person')
                    console.log(JSON.parse(result))
    
                    // console.log(localStorage.getItem('msg3'))
                }
                function deleteData(){
                    localStorage.removeItem('msg2')
                }
                function deleteAllData(){
                    localStorage.clear()
                }
            </script>
    
    1. SessionStorage
      SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    <h2>sessionStorage</h2>
            <button onclick="saveData()">点我保存一个数据</button>
            <button onclick="readData()">点我读取一个数据</button>
            <button onclick="deleteData()">点我删除一个数据</button>
            <button onclick="deleteAllData()">点我清空一个数据</button>
    
            <script type="text/javascript" >
                let p = {name:'张三',age:18}
    
                function saveData(){
                    sessionStorage.setItem('msg','hello!!!')
                    sessionStorage.setItem('msg2',666)
                    sessionStorage.setItem('person',JSON.stringify(p))
                }
                function readData(){
                    console.log(sessionStorage.getItem('msg'))
                    console.log(sessionStorage.getItem('msg2'))
    
                    const result = sessionStorage.getItem('person')
                    console.log(JSON.parse(result))
    
                    // console.log(sessionStorage.getItem('msg3'))
                }
                function deleteData(){
                    sessionStorage.removeItem('msg2')
                }
                function deleteAllData(){
                    sessionStorage.clear()
                }
    

    注意:
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null。
    4.JSON.parse(null)的结果依然是null。

    相关文章

      网友评论

          本文标题:浏览器缓存

          本文链接:https://www.haomeiwen.com/subject/axiafrtx.html