JavaScript本地存储详解

Posted 2021-09-07 接着奏乐接着舞。

目录

1.作用

2.特点

3.localStorage使用 

4.sessionStorage使用 

5. localStorage和sessionStorage的区别

6.本地存储使用过程中的注意事项

7. Cookie

8.localStorage和sessionStorage和Cookie的区别

---

1.作用

保存数据

---

2.特点

将数据保存到本地（浏览器客户端中）

---

3.localStorage使用 

 语法：设置值

localStorage.setItem('自定义键'，值)

语法：获取值

localStorage.getItem('键')

语法：删除值

localStorage.removeItem('键')//删除指定的数据
--------------------------------------------
localStorage.clear() //删除本地存储中的全部数据

---

4.sessionStorage使用 

和上面的localStorage用法一模一样

如：（就是名字换一下）

sessionStorage.setItem('自定义键'，值)

---

5. localStorage和sessionStorage的区别

5.1 localStorage属于持久化保存（除非你删除，否则一直保存）sessionStorage是临时保存（页面刷新数据就没了）

5.2  localStorage保存的数据可以跨页面，sessionStorage不可以

5.3 localStorage保存的数据大概在20M左右，sessionStorage在4M左右

---

6.本地存储使用过程中的注意事项

---

6.1 localStorage在保存数据的时候，同一个键只能保存一条数据

6.2 如果想要将多个数据保存到同一个键，可以将多条数据保存到数组，再保存到本地

6.3 如果将多个数据保存到数组中，获取的结果是字符串

6.4 以后遇到本地存储最终的完美解决方案：

1.保存数据的时候先将数据转化为字符串：JSON.stringify(值)

2.获取通过JSON.parse（）将获取的结果转化为对应的数组

结果：就是将数据从字符串转成数组，这样拿到的数据方便后续操作

---

7. Cookie

javascript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

7.1 设置值：

document.cookie="username=John Doe";

7.2 取值：

var x = document.cookie;

7.3 删除值

非常简单，只需要设置 expires 参数为以前的时间即可，示例：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

7.4 特点

1.大小：4k左右 （对比之下，小）

2.临时保存：关闭浏览器就会消失

3.保存的数据可以跨页面

---

8.localStorage和sessionStorage和Cookie的区别