[Day 25] LocalStorage 介绍

前言

HTML5 的 Web Storage 是一种可让网页将资料储存於本地端的技术，其作用如同 cookie。

• Cookie 储存空间很小，最多仅能储存4KB的资料。
• HTML5 Web Storage 的储存空间则大得多(储存资料容量至少5MB以上)。

localStorage 与 sessionStorage

Web Storage 提供两个物件可以将资料存在 client 端，一种是 localStorage，另一种是 sessionStorage

• localStorage:可以跨浏览器分页（tab）存取，且资料存取没有期限，除非手动从本地端清除。
• sessionStorage:生命周期较短，每次分页或浏览器关掉後就会清除。

基本操作：

• 设置资料：localStorage.setItem(key, value)
• 取得资料：let storageValue = localStorage.getItem(key, value)
• 清除资料：localStorage.removeItem(key)
• 清除全部资料：localStorage.clear()

只要将localStorage替换sessionStorage即可

• 储存在本地端的资料，格式为 key : value，需注意的是「value 的型态只有 String」!

找到储存的资料

• 在 DevTools console

JSON 字串转换

var arr = ['1','2','c'];

console.log( arr + " is " + typeof(arr));
// 1,2,c is object

1.转换成字串 JSON.stringify

var arrToStr = JSON.stringify(arr);

2.转换回原本格式 JSON.parse

• 会把一个JSON字串转换成 JavaScript的数值或是物件

var parse = JSON.parse(arrToStr);

参考资料：
[JavaScript] localStorage 的使用
[第七周] 浏览器资料储存 - Cookie、LocalStorage、SessionStorage
[Day16] JavaScript - 前端资料存
HTML5 的 Web Storage- local storage 与 session storage
Day20 localStorage、sessionStorage