这些日子我学到的JavaScript:Day23- localStorage

资料如何储存在浏览器？
透过 HTML 中的网页储存物件， 可以将网页中的资料储存在使用者的浏览器当中。
在 HTML5 问世之前，我们只能将小笔的资料储存在 cookies 当中。在 HTML5 问世之後，网页储存有了更加安全且容量更大的本地端储存空间，除此之外也不会影响到网页的效能。

网页储存物件分为两种，虽然都能将资料暂存在当下页面的 Storage 物件里，但是资料保存的时间不同。

window.sessionStorage ：放在 sessionStorage 的资料会在页面关闭时清空，只要该页面没被关闭或者有还原 (restore) 该页面，资料就会保存。
window.localStorage ： 放在 localStorage 的资料会永久保存，直到被使用者清除。
打开 chrome 开发者工具，选择 application 页签，选取左边的 localStorage，然後就能看到目前浏览器的资料暂存状况，其显示的方式是 key 与 value 栏位。（key 的意义可以理解成属性）

储存、取出资料的语法 - setItem、getItem
在 JS 中使用 setItem 语法，可以将资料写进浏览器里。
setItem 的第一个值是 key 的属性名，第二个值就是相对应的 value。

// 把字串存进 localStorage
var str = 'Tom';
localStorage.setItem('myName',str);
把资料存进浏览器後，要取出来的话要用 getItem 语法。

// 把刚刚存进去的字串用 key 名取出来
localStorage.getItem('myName');
如何把使用者键入的资料用 localStorge 存起来：范例程序码

透过 JSON.parse、JSON.stringify 来编译资料
我们要学习如何将资料在阵列与字串之间互相转换，因为 localStorage 只能储存字串资料。

把阵列转换成字串：
var country = [
{farmers: Tom}
]
var countryString = JSON.stringify(country);
把字串转换成阵列：
由於 localStorage 捞出来的资料一律都是字串型别（用 typeof 去查就知道），所以如果我们希望使用从 localStorage 取出来的资料，就必须转换成阵列。

localStorage.setItem('countryItem',countryString);
var getData = localStorage.getItem('countryItem');
var getDataArr = JSON.parse(getData);