JavaScript本地存储详解

ゝ一纸荒年。 2023-10-03 14:11 40阅读 0赞

**目录**

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的区别 ###

![20210820001249469.png][]

[20210820001249469.png]: https://img-blog.csdnimg.cn/20210820001249469.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中本地存储的方式有哪些？

就是浏览器给我们提供的可以让我们在浏览器上保存一些数据常用的本地存储 localStorage sessionStorage localStorage 特

冷不防/ 2023年10月14日 21:47/ 0 赞/ 131 阅读

相关 JavaScript本地存储详解

目录 1.作用 2.特点 3.localStorage使用 4.sessionStorage使用 5. localStorage和sessionStorage的区

ゝ一纸荒年。/ 2023年10月03日 14:11/ 0 赞/ 41 阅读

相关 JavaScript的本地存储和会话存储

Storage 1 认识Storage WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式 : l

淡淡的烟草味﹌/ 2023年10月02日 20:05/ 0 赞/ 107 阅读

相关 JavaScript全解析——本地存储

●就是浏览器给我们提供的可以让我们在浏览器上保存一些数据 ●常用的本地存储 ○ localStorage ○sessionStorage localStorag

本是古典何须时尚/ 2023年09月27日 18:52/ 0 赞/ 88 阅读

相关 JavaScript 本地存储

文章目录 1.本地存储简介 2.window.sessionStorage 3.window.localStorage

灰太狼/ 2023年09月24日 12:45/ 0 赞/ 151 阅读

相关本地存储session和location (javascript)

本地存储 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage约5M、localStorage约20

布满荆棘的人生/ 2022年12月09日 05:19/ 0 赞/ 206 阅读

相关本地存储

1、cookie 存储及设置时间 var date=new Date(); date.setDate(date.getDate()+7); do

刺骨的言语ヽ痛彻心扉/ 2022年06月09日 09:53/ 0 赞/ 328 阅读

相关 Javascript本地存储数据方案

Javascript本地存储数据方案 Cookie 这个恐怕是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便

- 日理万妓/ 2022年06月08日 10:45/ 0 赞/ 575 阅读

相关本地存储

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.本地存储

小咪咪/ 2022年06月04日 03:46/ 0 赞/ 428 阅读

相关基于js本地存储详解

在客户端运行的JS是不能操作用户电脑磁盘中的文件的（保护客户端运行的安全） 1、JS中的本地存储：使用JS向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息

曾经终败给现在/ 2021年11月13日 23:10/ 0 赞/ 348 阅读