快捷導(dǎo)航

JavaScript本地存儲(chǔ)與會(huì)話存儲(chǔ)的實(shí)現(xiàn)介紹

更新時(shí)間：2022年08月18日 11:51:25 作者：小余努力搬磚

本地存儲(chǔ)和會(huì)話存儲(chǔ)是比較常用的方法，你知道兩者的區(qū)別嗎，本文詳細(xì)的介紹了JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用，具有一定的參考價(jià)值，感興趣的可以了解一下

一、簡(jiǎn)單介紹

本地存儲(chǔ)和會(huì)話存儲(chǔ)的目的，是將所輸入的文件存入到瀏覽器中，在需要的時(shí)候，直接調(diào)用，但是本地存儲(chǔ)和會(huì)話存儲(chǔ)有著一定的區(qū)別，本地存儲(chǔ)，在不主動(dòng)刪除的情況下,會(huì)一直保留在瀏覽器中，會(huì)話存儲(chǔ)是，當(dāng)前保存的內(nèi)容，頁面刷新還會(huì)保留在瀏覽器中，但是關(guān)閉頁面在打開時(shí)，會(huì)發(fā)現(xiàn)沒有數(shù)據(jù)了。這是他們兩的用處和區(qū)別。

二、localStorage本地存儲(chǔ)

如下代碼

我們先給button一個(gè)監(jiān)聽事件，讓我們有存入的動(dòng)作

這里是想在提交后也能在頁面上顯示，所有定義了一個(gè)li來吧input的value值賦值到ul里面

這里使用了insertBefore在添加時(shí)，會(huì)在最上方

這里arr是自己定義的數(shù)組

存儲(chǔ)和獲取都是通過函數(shù)封裝

savaData(arr)就是將input的值存儲(chǔ)到了瀏覽器

window.localStorage.setItem('input', JSON.stringify(title)) 保存的代碼title是形參，input自己取得

獲取let data = window.localStorage.getItem('input') 上面取的input

這里有個(gè)if判斷是判斷這里data是否有內(nèi)容，有就return JSON.parse(data) 沒有就return[]主要是得到所有內(nèi)容的數(shù)組

代碼段也有注釋解釋

<style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="輸入內(nèi)容"><button>提交</button>
    <hr>
    <ul></ul>
    <script>
        let input = document.querySelector('input')
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            let arr = getData()  //調(diào)用內(nèi)容，是為了獲得已經(jīng)存入的內(nèi)容，不然會(huì)出現(xiàn)內(nèi)容覆蓋
            let li = document.createElement('li')
            li.innerHTML = input.value; //表單值給到li
            ul.insertBefore(li, ul.children[0]);//在把值給到ul添加值會(huì)在第一個(gè)
            arr.push(input.value)
            saveData(arr)
            input.value = '' //為好看，輸入過后表單的內(nèi)容自動(dòng)清空
        })
        function saveData(title) {
            window.localStorage.setItem('input', JSON.stringify(title))
        }
        function getData(get) {
            let data = window.localStorage.getItem('input')
            console.log(data);//打印所取到的值，但是第一次為空，因?yàn)闉g覽器里面沒有值
            if (data != null) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
    </script>
</body>

三、sessionStorage會(huì)話存儲(chǔ)

與本地存儲(chǔ)的使用沒有區(qū)別，只要在跟換單詞即可

window.sessionStorage.setItem('input', JSON.stringify(title))

let data = window.sessionStorage.getItem('input')

    <style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="輸入內(nèi)容"><button>提交</button>
    <hr>
    <ul></ul>
    <script>
        let input = document.querySelector('input')
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            let arr = getData()
            let li = document.createElement('li')
            li.innerHTML = input.value;
            ul.insertBefore(li, ul.children[0]);
            arr.push(input.value)
            saveData(arr)
            input.value = ''
        })
        function saveData(title) {
            window.sessionStorage.setItem('input', JSON.stringify(title))
        }
        function getData(get) {
            let data = window.sessionStorage.getItem('input')
            console.log(data);
            if (data != null) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
    </script>
</body>

總結(jié)

本地存儲(chǔ)和會(huì)話存儲(chǔ)之間唯一的主要區(qū)別是，一旦我們關(guān)閉瀏覽器，我們就會(huì)丟失會(huì)話存儲(chǔ)中保存的任何內(nèi)容。但是，本地存儲(chǔ)并非如此。

最后，讓我們看看 MDN 怎么說：

窗口界面的 localStorage 只讀屬性允許您訪問 Document 來源的 Storage 對(duì)象；存儲(chǔ)的數(shù)據(jù)跨瀏覽器會(huì)話保存。
只讀 sessionStorage 屬性訪問當(dāng)前源的會(huì)話存儲(chǔ)對(duì)象。sessionStorage 類似于 localStorage；不同之處在于，雖然 localStorage 中的數(shù)據(jù)不會(huì)過期，但 sessionStorage 中的數(shù)據(jù)會(huì)在頁面會(huì)話結(jié)束時(shí)被清除。

到此這篇關(guān)于JavaScript本地存儲(chǔ)與會(huì)話存儲(chǔ)的實(shí)現(xiàn)介紹的文章就介紹到這了,更多相關(guān)JS本地存儲(chǔ)與會(huì)話存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: