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);

#推薦教學：《html影片教學》

以上是html5本地儲存有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！