12.9JavaScript 本地存储

简介: 12.9JavaScript 本地存储

存储分为三种存储:永久性存储 localStorage、临时性存储 sessionStorage、可设失效性存储 cookie


永久性存储除非主动删除否则一直存在本地。


临时性存储,当页面关闭时,自动清除。


cookie 可以设置失效时间,如果不设置就会和临时性存储一样,在页面关闭时自动删除


永久性存储:localStorage


分为:存值、取值、删值、获取所有的数量、通过下标获取存储记录的名称、获取所有的值 、清除所有的值、判断本地存储是否有某个名称,有则返回 true

存值:

localStorage.setItem("name1","123");

取值:

console.log(localStorage.getItem('name1'));

删值:

localStorage.removeItem(‘名称’)

获取所有的数量:

localStorage.length

通过下标获取存储记录的名称:

localStorage.key(下标)

获取所有的值:

localStorage.valueOf()

清除所有的值:

localStorage.clear()

判断本地存储是否有某个名称,有则返回 true:

localStorage.hasOwnProperty(‘名称’)

可设失效性存储 cookie:

分为:存值,返回所有数据以 ; 分割,失效时间,若不设置时间,默认关闭浏览器时清除

存值:

document.cookie = ‘数据’;

返回所有数据以 ; 分割:

document.cookie

失效时间,若不设置时间,默认关闭浏览器时清除:

document.cookie = ‘数据;expires=时间

删除 cookie 可以通过给指定数据设置过去的时间,使其失效自动删除。

注意:时间格式必须是 UTC 或 GMT 时间

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

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62