JavaScript本地存储详解

简介: JavaScript本地存储详解

1.作用

保存数据


2.特点


将数据保存到本地(浏览器客户端中)

3.localStorage使用


语法:设置值

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

语法:获取值

localStorage.getItem('键')

语法:删除值

1. localStorage.removeItem('键')//删除指定的数据
2. --------------------------------------------
3. 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的区别


image.png


相关文章
|
6月前
|
存储 JavaScript 前端开发
账号登录验证(原生js,本地存储)
账号登录验证(原生js,本地存储)
46 0
|
存储 JavaScript 前端开发
Javascript-localStorage本地存储
Javascript-localStorage本地存储
51 0
|
存储 移动开发 JavaScript
js中本地存储的方式及用法
js中本地存储的方式及用法
185 0
|
25天前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
39 0
|
3月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
63 9
|
3月前
|
存储 JavaScript 前端开发
JavaScript 本地存储
JavaScript 本地存储
25 0
|
3月前
|
存储 JavaScript
js之本地存储
js之本地存储
36 0
|
4月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
136 0
|
6月前
|
存储 缓存 JavaScript
JavaScript本地存储的方式有哪些
本文介绍了四种Web存储技术:localStorage用于长期存储用户数据,关闭浏览器后仍保留;sessionStorage仅在会话期间存储数据,浏览器关闭后消失;Cookie存储少量字符串数据,通常用于用户身份识别;IndexedDB则用于大量结构化数据的存储,适合复杂应用的需求。每种技术都有其特定的使用场景和优缺点。
|
6月前
|
存储 缓存 前端开发
< 今日份知识点:Javascript本地存储的方式有哪些?区别及应用场景? >
在前端开发中,偶尔需要存储一些如: 用户信息、登录状态、历史记录等常量数据。用于后续二次调用,并且避免刷新后丢失。这时,就需要用到本地存储了。 在`JavaScript` 中,提供了四种可用的本地存储方式: **`cookie`** ,**`sessionStorage`**, **`localStorage`**, **`indexedDB`** ( 已废除的 `WebSQL` )。四种方式各有千秋,接下来,就由小温带各位卷王了解一下,`Javascript` 中的本地存储吧
< 今日份知识点:Javascript本地存储的方式有哪些?区别及应用场景? >