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

二、localStorage本地存儲

如下代碼

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

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

這里使用了insertBefore在添加時，會在最上方

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

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

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

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

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

這里有個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)容，不然會出現(xiàn)內(nèi)容覆蓋
            let li = document.createElement('li')
            li.innerHTML = input.value; //表單值給到li
            ul.insertBefore(li, ul.children[0]);//在把值給到ul添加值會在第一個
            arr.push(input.value)
            saveData(arr)
            input.value = '' //為好看，輸入過后表單的內(nèi)容自動清空
        })
        function saveData(title) {
            window.localStorage.setItem('input', JSON.stringify(title))
        }
        function getData(get) {
            let data = window.localStorage.getItem('input')
            console.log(data);//打印所取到的值，但是第一次為空，因為瀏覽器里面沒有值
            if (data != null) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
    </script>
</body>

三、sessionStorage會話存儲

與本地存儲的使用沒有區(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é)

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

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

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

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

您可能感興趣的文章: