关于 localStorage 使用说明

为什么要学 localStorage，原因大概如下面所说一样：

将资料从页面中的程式码储存到 Web浏览器的储存空间当中。如此一来，本来存入程式码当中的资料，就不会因重新整理页面或者关闭浏览器而消失

最近想要好好串接个 api，针对喜欢的文章果想要收藏要怎么办？
虽然之前有做个，但有些部分感觉不是很清楚，我对于事情是否很清楚的理解为，你是否能够自己说明，最近最大的学习障碍就是有时知道原理，但就是做不到ＸＤ。

定义：

localStorage ：可以跨浏览器分页做使用、使用者关掉分页或浏览器再打开资料仍不会消失，且资料无期效限制，资料将永久被保留。

在做之前你必须要懂的事：

我想要做个todolist 之前

loaclStorage / 事件监听 / Dom / JSON parse() / JSON stringify()

如何操作

1.如何存值到 localStorage

**setItem() **

localStorage.setItem(key, value)

透过在 setItem() 方法中指定物件属性的 key 以及 value ，
我们可以在 storage 物件中加入属性或修改原本的属性内容。

setItem() 存入资料 — key 值是 myname； value 是 tom ：

在 DevTools Application 中查看 local storage
 框起来的 tom

var name = "Tom";localStorage.setItem("myname",name);

---

範例:https://codepen.io/chiakilalala/pen/zYGOLbO

2.如何捞值到 localStorage

取出资料：getItem()

localStorage.getItem(key)

透过在 getItem() 方法中输入属性的 key ，我们可以得到 storage 物件对应的属性 value 。
getItem

console.log(localStorage.getItem("myname");)

console.log 出现 Tom

---

3.移除资料：removeItem()

透过在 removeItem() 方法，我们可以把指定的属性从 storage 物件中移除。

//清空localStoragelocalStorage.removeItem(key)localStorage.clear()  // undefined   localStorage      //清除全部资料 Storage {length: 0} 储存资料

案例基本操作

利用 localstorage 呼叫和操作 ，点击按钮存入网路储存空间，然后

先试着用一个输入键，把值存入 localstorage 使用 setItem（）存入资料 即使用 getItem 取出资料

画面如下：

let btn = document.querySelector('.btnClass');function savename(e){  // 捞出输入键的值let text =document.querySelector('.textClass').value;  // 存在Localstoreage   localStorage.setItem('mylove', text);}btn.addEventListener('click',savename);

再用之前存入的 localstorage，把它取出来

使用 getItem()

let btn = document.querySelector('.btnClass');let call = document.querySelector('.callClass');function savename(e){  // 捞出输入键的值 var text =document.querySelector('.textClass').value;  // 存在Localstoreage   localStorage.setItem('mylove', text);}btn.addEventListener('click',savename);call.addEventListener('click',function(){  // 捞出Localstoreage的值var str = localStorage.getItem('mylove');  alert(`my farovite is ${str}`);});

localStorage 需要注意的地方

我们可以透过 Storage 方法，轻鬆的将资料储存在本地端，但是实际应用之后，我们会发现我们要储存的资料 value，全部被转成字串格式

非常重要非常重要！！！！

资料储存的格式 key 和 value 都只能接受「字串 」，若
储存的资料非字串 — 阵列或物件 — 在储存时会被转成字串格式

1.将 array 转为 string

将资料转为 JSON 格式的字串。

JSON.stringify()

2.将 sring 转为 array

将资料由 JSON 格式字串转回原本的资料内容及型别。

JSON.parse( )

学以上两点是因为 localstorage 只会保存 string 资料

原因如下：

var country = [  {farmer :'卡四伯'}];localStorage.setItem('mynume', country);var getDate = localStorage.getItem('mynume')console.log(getDate[0].farmer);

console.log 结果会出现 undefined
 使用 typeof() 查值 会发现 是 string 而不是 array
因为 localStorage 只会自动转成 string 内容

该如何变成阵列？

解决方法：将资料转换成 JOSN 格式的字串

透过 JSON.stringify() 方法，将要储存的资料转换为 JSON 格式的字串

var country = [  {farmer :'卡四伯'}];var countryString = JSON.stringify(country);console.log(countryString);localStorage.setItem('mynume',countryString);

到 Application Panel 查看储存的资料内容，可以发现这次的格式和预期的相同：

当我们要取出资料时，使用 JSON.parse() 方法，将资料转换回原本的格式：

var country = [  {farmer :'卡四伯'}];var countryString = JSON.stringify(country);console.log(countryString);localStorage.setItem('mynume',countryString);var getData = localStorage.getItem('mynume');var getDataAry = JSON.parse(getData); console.log(getDataAry[0].farmer);

範例网址:https://codepen.io/chiakilalala/pen/NWPLxpQ

3. dataset、array 运用

範例网址

第一步骤:因为使用 queryselector 绑定,所以只能得到一个 li 回应. 该如何在 JS 中动态的去绑定 HTML 标籤元素(以去绑定a、li等等)
但如果使用太多 queryselector 各别绑定会导致效能很差. 针对锁定的 li 部分下此指令 if(num !=="LI"){return} ,以作为一个中断点

4.splice - 删除 array 资料

splice() MDN介绍

範例网址

定义:

从 Array 中添加/删除项目，回传被删除的项目。
 这里我们先专注 删除项目

对象：

可操控 Array

array.splice(start)array.splice(start, deleteCount)array.splice(start, deleteCount, item1, item2, ...)

例子

var array=[1,2,3,4,5];    array.splice(3,2);    console.log(array);    //结果： 1 2 3

这些知识，为接下来要做的 todolist 有很大的关係，
为了资料格式的转换能更上手，特此说明纪录。

资料来源：
Array数组的 splice()方法之删除、插入、替换
什么是 HTML 5 中的资料属性（data-* attribute）
JavaScript 入门篇 - 学徒的试炼 -关于 localStorage