localStorage - 本地儲存(新增、讀取、修改、刪除、JSON格式儲存)
阿新 • • 發佈:2018-11-09
這個是我對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的自己的一些理解~