1. 程式人生 > 其它 >瀏覽器本地儲存(Html5新增:WebStorage)

瀏覽器本地儲存(Html5新增:WebStorage)

1.localStorage:本地儲存,瀏覽器重新整理頁面還會存在,除非手動去刪除,否則會一直存在,寫在本地硬碟中

1.設定屬性:localStorage.setItem('屬性值','屬性名'),屬性名和屬性值都必須是字串,如果傳入Number型別的值會被自動轉為字串,如果是物件,則必須呼叫JSON.stringify來轉換為JSON格式的字串()

程式碼示例:localStorage.setItem('msg','hello') ---值為字串型別

程式碼示例:localStorage.setItem('msg',JSON.stringify(ObjectName)) ---值為物件型別

2.讀取屬性:localStorage.getItem('屬性名') 如果要讀取的屬性名的屬性值為物件可以使用JSON.parse()解析轉為物件

程式碼示例:localStorage.getItem('msg') ---值為字串型別

程式碼示例:let obj = localStorage.getItem('ObjectName') obj = JSON.parse(obj) ---值為物件型別

3.刪除屬性:loaclStorage.removeItem('屬性名')

示例程式碼:loaclStorage.removeItem('msg')

4.清空屬性:loaclStorage.clear()

2.sessionStorage:會話儲存:瀏覽器重新整理頁面就會消失

1.設定屬性:sessionStorage.setItem('屬性值','屬性名'),屬性名和屬性值都必須是字串,如果傳入Number型別的值會被自動轉為字串,如果是物件,則必須呼叫JSON.stringify來轉換為JSON格式的字串()

程式碼示例:sessionStorage.setItem('msg','hello') ---值為字串型別

程式碼示例:sessionStorage.setItem('msg',JSON.stringify(ObjectName)) ---值為物件型別

2.讀取屬性:sessionStorage.getItem('屬性名')

如果要讀取的屬性名的屬性值為物件可以使用JSON.parse()解析轉為物件

程式碼示例:sessionStorage.getItem('msg') ---值為字串型別

程式碼示例:let obj = sessionStorage.getItem('ObjectName') obj = JSON.parse(obj) ---值為物件型別

3.刪除屬性:sessionStorage.removeItem('屬性名')

示例程式碼:sessionStorage.removeItem('msg')

4.清空屬性:sessionStorage.clear()

注意:讀取沒有的屬性值會返回null,JSON.parse(null)的結果還是null