技術標籤：前端javascriptvue.jsjquery

使用localstorage儲存Boolean值的問題及解決

1.前言(個人記錄，可跳過)

最近使用vue寫前端，需要實現點選切換顯示內容，我選擇了一個Boolean變數來控制內容的變換，為了記錄使用者的使用習慣，使用了localstorage來儲存此變數到本地以供下次設定網頁內容顯示。

2.出現的問題及對應的解決

2.1從localstorage取出來的值是字串

解決：型別轉換

//示例
this.ascii=Boolean(localStorage.getItem('ascii'));

2.2存入的Boolean值自動變成了字串，失去了真假效果

//示例：
let temp=true;
localStorage.setItem("temp",temp);
console.log(Boolean(localStorage.getItem("temp"))); //輸出true;
localStorage.removeItem("temp");
temp=false;
localStorage.setItem("temp",temp);
console.log(Boolean(localStorage.getItem("temp"))); //輸出true;
 

localStorage.removeItem("temp");

解決：在存入時使用三目運算子控制

// An highlighted block
localStorage.setItem("ascii",val===true?"true":"");

原理：存入的字串只要不是空時經過強制型別轉換就會得到true(Boolean值)；為空時得到false(Boolean值)。