localStorage用法小總結

記得前端大神winter說過：要建立起自己的知識體系，第一步：尋找線索(找準確、全面的)；第二步，建立聯絡；第三步，是分類(用思維導圖)，第四步，是追本溯源(找到最初的那個它～)

今天，懷著崇拜大神的心情，來學習下 localstorage的基本用法。用到的學習機是chrome瀏覽器，畢竟大廠權威性還是可以的。

我首先在開發者工具的console中，輸入了

localstorage.

然後就彈出了一些列宿主（瀏覽器）提供的localstorage自帶的方法，摘錄了一些常用的api如下表所示：

名稱作用

clear

清空localstorage上儲存的資料

getitem

讀取資料

hasownproperty

檢查localstorage上是否儲存了變數x，需要傳入x

key讀取第i個資料的名字或稱為鍵值(從0開始計數)

length

localstorage儲存變數的個數

propertyisenumerable

用來檢測屬性是否屬於某個物件的

removeitem

刪除某個具體變數

setitem

儲存資料

tolocalestring

將（陣列）轉為本地字串

valueof

獲取所有儲存的資料

localstorage.clear()    // undefined    
localstorage // storage

localstorage.setitem("name","caibin") //儲存名字為name值為caibin的變數 localstorage.name = "caibin"; // 等價於上面的命令

localstorage // storage

localstorage.getitem("name") //caibin,讀取儲存在localstorage物件裡名為name的變數的值
localstorage.name // "caibin"
localstorage.valueof() //讀取儲存在localstorage上的所有資料
localstorage.key(0) // 讀取第一條資料的變數名(鍵值)
//遍歷並輸出localstorage裡儲存的名字和值
for(var i=0; iconsole.log('localstorage裡儲存的第'+i+'條資料的名字為：'+localstorage.key(i)+',值為：'+localstorage.getitem(localstorage.key(i)));
}

localstorage.removeitem("name"); //undefined

localstorage // storage 可以看到之前儲存的name變數已經從localstorage裡刪除了

// 這些資料都是測試的，是在我當下環境裡的，只是demo哦～ localstorage.hasownproperty('name') // true

localstorage.hasownproperty('***') // false

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localstorage.arr = arr //["aa","bb","cc"]
localstorage.arr.tolocalestring(); // "aa,bb,cc"

var students = ,
teemo: 
}students = json.stringify(students); //將json轉為字串存到變數裡
console.log(students);
localstorage.setitem("students",students);//將變數存到localstorage裡
var newstudents = localstorage.getitem("students");
newstudents = json.parse(students); //轉為json
console.log(newstudents); // 列印出原先物件

說一下這個糾結的東西：簡單說是跨js傳遞json值，通過localstorage中轉，有種壓縮和解壓縮的味道在。其實應該有個公共的變數.js放在最前面，會不會更好呢。我好像是在這樣乙個場景下用到的：後台傳遞json格式的經緯度給前台，前台讓它在地圖上渲染出來，而且是兩個不同的js檔案傳遞，然後就使用了這個方法。不過現在想想應該有其它更好的解決方法吧。

localStorage用法小總結

localStorage用法小總結

localStorage的用法小記

localStorage中8個用法

localStorage用法小總結

localStorage用法小總結

localStorage的用法小記

localStorage中8個用法

相關推薦