JavaScript本地存储的方式有哪些

简介: 本文介绍了四种Web存储技术:localStorage用于长期存储用户数据,关闭浏览器后仍保留;sessionStorage仅在会话期间存储数据,浏览器关闭后消失;Cookie存储少量字符串数据,通常用于用户身份识别;IndexedDB则用于大量结构化数据的存储,适合复杂应用的需求。每种技术都有其特定的使用场景和优缺点。

Web存储技术

1. localStorage

  • 特点:长期存储,除非手动删除否则会一直保存在浏览器中,清除缓存或卸载浏览器后消失。
  • 存储语法:window.localStorage.setItem(名字,值)
  • 获取语法:window.localStorage.getItem(名字)
  • 删除语法:window.localStorage.removeItem(名字)
  • 作用:删除localStorage中的数据。
  • 限制:只能保存字符串类型的数据。
  • 应用场景:适用于存储不需要跨会话访问的数据,如用户偏好设置、游戏进度等。

2. sessionStorage

  • 特点:会话存储,浏览器关闭后数据消失,可以跨页面通讯,但仅限于本页面跳转。
  • 存储语法:window.sessionStorage.setItem(名字,值)
  • 获取语法:window.sessionStorage.getItem(名字)
  • 删除语法:window.sessionStorage.removeItem(名字)
  • 应用场景:适用于存储会话级别的数据,如用户在会话期间的浏览记录。

3. Cookie

  • 特点:存储字符串,大小限制约4KB,存储时效性默认为会话级别,可手动设置过期时间。
  • 操作必须依赖服务器:本地打开的页面不能操作cookie。
  • 存储语法:document.cookie = 'key=value';
  • 获取语法:document.cookie
  • 应用场景:常用于识别用户身份,如登录信息的存储。

4. IndexedDB

  • 特点:低级API,用于存储大量结构化数据,包括文件/ blobs。
  • 优点:存储量理论上无上限,操作异步,支持存储JS对象。
  • 缺点:操作繁琐,有门槛。
  • 应用场景:适用于存储大量数据,如在线游戏的存档、网页应用的数据库等。
相关文章
|
4月前
|
存储 JavaScript 前端开发
账号登录验证(原生js,本地存储)
账号登录验证(原生js,本地存储)
43 0
|
11月前
|
存储 JavaScript 前端开发
Javascript-localStorage本地存储
Javascript-localStorage本地存储
46 0
|
存储 移动开发 JavaScript
js中本地存储的方式及用法
js中本地存储的方式及用法
174 0
|
1月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
45 9
|
1月前
|
存储 JavaScript 前端开发
JavaScript 本地存储
JavaScript 本地存储
18 0
|
1月前
|
存储 JavaScript
js之本地存储
js之本地存储
28 0
|
2月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
80 0
|
4月前
|
存储 缓存 前端开发
< 今日份知识点:Javascript本地存储的方式有哪些?区别及应用场景? >
在前端开发中,偶尔需要存储一些如: 用户信息、登录状态、历史记录等常量数据。用于后续二次调用,并且避免刷新后丢失。这时,就需要用到本地存储了。 在`JavaScript` 中,提供了四种可用的本地存储方式: **`cookie`** ,**`sessionStorage`**, **`localStorage`**, **`indexedDB`** ( 已废除的 `WebSQL` )。四种方式各有千秋,接下来,就由小温带各位卷王了解一下,`Javascript` 中的本地存储吧
< 今日份知识点:Javascript本地存储的方式有哪些?区别及应用场景? >
|
4月前
|
存储
12.9JavaScript 本地存储
12.9JavaScript 本地存储
|
4月前
|
存储 JavaScript 前端开发
javascript本地存储(简介)
javascript本地存储(简介)