這個是我對localStorage的自己的理解~

什麼是localStorage?

html5新增的一個本地儲存的API，由於cookie的儲存空間過小，localStroage一般瀏覽器支援儲存5M，用於儲存客戶端的一些臨時資訊

只能儲存字串型別，不會被爬蟲抓到

localStorage的儲存生命週期是永久的，除非使用者手動清除瀏覽器快取

localStroage - 新增

 window.localStorage.setItem('a','123456')
//存入的是number型別，實際儲存在localStorage的是string型別，因為localStorage只支援string型別儲存
 

localStroage - 讀取

window.localStorage.getItem("a");
console.log(typeof(window.localStorage.getItem("a"))); //String

官方推薦上述兩種方法 setItem和getItem來新增和讀取localStorage

localStorage - 修改

和修改全域性變數的的原理一樣，重新賦值即可

window.localStorage.setItem('a','新的值')

localStorage - 刪除

//清除所有localStorage
window.localStorage.clear();

//清除某個鍵值對
window.localStorage.removeItem("a");
 

localStorage - 所有的鍵的獲取

使用key()方法，向其中出入索引即可獲取對應的鍵

let storage = window.localStorage;
for(let i = 0 ; i < storage.length; i++){
    console.log(storage.key(i));
}

JSON格式的儲存問題

 一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字串形式

這個時候我們可以使用 JSON.stringify() 這個方法，來將JSON轉換成為JSON字串，儲存在localStorage中

//註釋：練習使用的是vue框架，原生不這樣寫
export default{
    name:'localStorage',
    data(){
        return{
            nameData:{
                name:'tom',
                age:15,
            }
        }
    },
    methods:{
        saveJSON(){
            let nameData = JSON.stringify(this.nameData) ;
            window.localStorage.setItem('nameData',nameData);
        }
    }
}

var storage=window.localStorage;
var data={
    name:'tom',
    hobby:'program'
};
var nameData = JSON.stringify(data);
storage.setItem("nameData",nameData);

獲取的localStorage怎麼將字串轉換回JSON格式，使用JSON.parse()

let getNameData = window.localStorage.getItem("nameData");
console.log(typeof(getNameData)); //sting型別
let getNameDataJSON = JSON.parse(getNameData);
console.log(typeof(getNameDataJSON));  //object型別

感謝看完~這是我對localStorage的自己的一些理解~