html5有哪些本地存儲

這篇文章主要介紹“html5有哪些本地存儲”，在日常操作中，相信很多人在html5有哪些本地存儲問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5有哪些本地存儲”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

html5本地存儲有：1、localStorage，它的生命周期是永久，除非主動清除localStorage信息，否則這些信息將永遠存在；2、sessionStorage，它僅在當前會話下有效，關閉頁面或瀏覽器后被清除。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML5 Web 存儲是本地存儲，存儲在客戶端，包括localStorage和sessionStorage。HTML5 Web 存儲是以鍵/值對的形式存儲的，通常以字符串存儲。

localStorage

localStorage生命周期是永久，除非主動清除localStorage信息，否則這些信息將永遠存在。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。

        // 1、保存數據到本地
        // 第一個參數是保存的變量名，第二個是賦給變量的值
        localStorage.setItem('Author', 'local');
        // 2、從本地存儲獲取數據
        localStorage.getItem('Author');
        // 3、從本地存儲刪除某個已保存的數據
        localStorage.removeItem('Author');
        // 4、清除所有保存的數據
        localStorage.clear();

sessionStorage

sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器后被清除。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。

        // 1、保存數據到本地
        // 第一個參數是保存的變量名，第二個是賦給變量的值
        sessionStorage.setItem('Author', 'session');
        // 2、從本地存儲獲取數據
        sessionStorage.getItem('Author');
        // 3、從本地存儲刪除某個已保存的數據
        sessionStorage.removeItem('Author');
        // 4、清除所有保存的數據
        sessionStorage.clear();

復雜數據存儲

上面都是對于簡單的數據類型的存儲，但當要存儲的數據是一個對象或是數組的時候，直接存儲是不行的

錯誤的存儲：

    var user = {
      username: 'liu',
      password: '123456'
    };
    sessionStorage.setItem('user', user);
    console.log(sessionStorage.getItem('user'));

這個時候，就需要轉換數據格式。

存儲數據前：利用JSON.stringify將對象轉換成字符串

獲取數據后：利用JSON.parse將字符串轉換成對象

    var user = {
      username: 'liu',
      password: '123456'
    };
    user = JSON.stringify(user);
    sessionStorage.setItem('user', user);
    var account = sessionStorage.getItem('user');
    console.log(account);
    account = JSON.parse(account)
    console.log(account);

到此，關于“html5有哪些本地存儲”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！