JavaScript本地存儲與會話存儲的實現介紹

Posted on by

一、簡單介紹

本地存儲和會話存儲的目的，是將所輸入的文件存入到瀏覽器中，在需要的時候，直接調用，但是本地存儲和會話存儲有著一定的區別，本地存儲，在不主動刪除的情況下,會一直保留在瀏覽器中，會話存儲是，當前保存的內容，頁面刷新還會保留在瀏覽器中，但是關閉頁面在打開時，會發現沒有數據瞭。這是他們兩的用處和區別。

二、localStorage本地存儲

如下代碼

我們先給button一個監聽事件，讓我們有存入的動作

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

這裡使用瞭insertBefore在添加時，會在最上方

這裡arr是自己定義的數組

存儲和獲取都是通過函數封裝

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

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

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

這裡有個if判斷是判斷這裡data是否有內容，有就return JSON.parse(data) 沒有就return[]主要是得到所有內容的數組

代碼段也有註釋解釋

<style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="輸入內容"><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; //表單值給到li
            ul.insertBefore(li, ul.children[0]);//在把值給到ul添加值會在第一個
            arr.push(input.value)
            saveData(arr)
            input.value = '' //為好看，輸入過後表單的內容自動清空
        })
        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會話存儲

與本地存儲的使用沒有區別，隻要在跟換單詞即可

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="輸入內容"><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>

總結

本地存儲和會話存儲之間唯一的主要區別是，一旦我們關閉瀏覽器，我們就會丟失會話存儲中保存的任何內容。但是，本地存儲並非如此。

最後，讓我們看看 MDN 怎麼說：

  • 窗口界面的 localStorage 隻讀屬性允許您訪問 Document 來源的 Storage 對象；存儲的數據跨瀏覽器會話保存。
  • 隻讀 sessionStorage 屬性訪問當前源的會話存儲對象。sessionStorage 類似於 localStorage；不同之處在於，雖然 localStorage 中的數據不會過期，但 sessionStorage 中的數據會在頁面會話結束時被清除。

到此這篇關於JavaScript本地存儲與會話存儲的實現介紹的文章就介紹到這瞭,更多相關JS本地存儲與會話存儲內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：