有几种前端存储方式？这几种方式的区别是什么？

最新推荐文章于 2022-08-24 14:26:28 发布
最新推荐文章于 2022-08-24 14:26:28 发布
阅读量817 收藏 3
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meraln/article/details/114025508
版权

有几种前端存储方式？这几种方式的区别是什么？

  • cookies: 在HTML5标准前本地存储的主要方式，优点是兼容性好，请求头自带cookies方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookies，使用起来麻烦需要自行安装
  • localStorage: HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性存储(除非手动删除)，大小为5M，兼容IE8+
  • sessionStorage: 与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同,他不能在所有同源窗口中共享，是会话级别的存储方式
  • Web SQL: 2010年被W3C废弃的本地数据库数据存储方案，但是主流的浏览器都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用javascript时用进行转换，较为繁琐。
  • indexedDB: 是被正式纳入HTML5标准的数据库储存方案，他是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，用时用javascript进行操作会非常方便
Yasuo Man
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
几种前端数据存储方式（记录）
qq_35876316的博客
07-22 3683
1. cookie cookie生成cookie是存在客户端，session存在服务器端。在cookie当用户第一次访问网页时，服务器会给客户端返回一个cookie，在cookie中保存着服务器端session文件的位置信息，用户第一次访问服务器，服务器就会为它创建一个session文件，并将session的标识保存在cookie中发给它。在这之后，通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。 cookie访问和设置在 JavaScript 中可以通过 document.cookie
详解前端HTML5几种存储方式的总结
09-27
HTML5在前端开发中引入了多种存储方式，旨在解决传统Cookie存在的问题，如大小限制、每次请求携带数据等问题。本文将详细介绍HTML5的五种存储方式：localStorage、sessionStorage、离线缓存（Application Cache）、...
前端的三种存储方式的区别
hhhhs2的博客
04-23 2243
前端有三种存储方式分别是:localStorage、sessionStorage、cookies localStorage： 以键值对的方式存储存 储没时间限制 永不失效 除非自己删除记录 cookies： 数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识 sessionStorage： 当页面关闭后被清理与其他两个相比不能同源窗口共享 是会话级别的存储方式 ...
前端存储主要有哪些方式，有什么区别（sessionStorage,localStorage,cookie）
qq_42526440的博客
03-17 2437
前端在处理页面数据的时候有时候会存放一些数据在浏览器当中，一般存储在浏览器当中的缓存数据安全性比较低。 主要的存储方式如下图： 1.localStorage 1.存储时间是永久存储。 2.大小在5M左右。 3.ie低版本或者一些使用无痕浏览器都是不支持的 4.存储的是字符串，内容过多时，会消耗内存空间，让页面变卡 5.本地存储，不会和服务器有交互 代码： // 使用方法存储数据 localStorage.setItem("name", "Srtian") // 使用属性存储数据 localStorage.
html：localStorage的存储,读取,删除 及html对象转化
qq_45469347的博客
06-15 541
localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',value) 但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为 {object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式 传入Object window.localStorage.setItem('param',JSON.stringify(Object)) 通过JSON.strin
有几种前端储存的方式？这些方式的区别是什么？
weixin_49790903的博客
03-30 722
有几种前端储存的方式？这些方式的区别是什么？ 前端的存储方式有5种 cookies localstorage sessionstorage Web SQL IndexedDb 这些存储方式有什么区别？ cookies:在HTML5标准前本地储存的主要方式，优点是兼容性好，请求自带cookie，缺点是大小只有4k,自动请求头加入cookie浪费流量，每个domain限制20个cookie,使用起来麻烦需要自行封装。 localStorage:HTML5加入的以键值对（key-value)为标准的方
这几种方式将前端的 对象转换成json ,再用 Json.stringify(list)
09-15
下面我们将详细探讨几种常见的将前端对象转换为JSON并使用`JSON.stringify()`的方法。 1. **直接使用`JSON.stringify()`** `JSON.stringify()`是JavaScript内置的函数，用于将一个JavaScript值（对象或数组）转换...
前端项目中数据传递的几种“姿势”
01-20
本文将探讨几种常见的前端项目中数据传递的方法，帮助开发者更好地理解和掌握这些"姿势"。 1. 属性绑定（Attribute Binding） 在前端框架如React、Vue或Angular中，属性绑定是最基础的数据传递方式。通过在组件间...
web前端三种常见的通过JS加密文本方式
06-18
Base64不是一种加密算法，而是一种编码方式。它将任意数据转换成ASCII字符集中的64个字符，通常用于在不支持二进制传输的环境（如邮件系统）中传递二进制数据。在Web前端，Base64可以用来编码图片、音频等非文本...
前端vue-cli项目中使用img图片和background背景图的几种方法
10-16
以下将详细介绍如何在Vue CLI项目中使用这两种类型的图片。 1. **使用img标签** 当需要显示图片作为内容时，通常会使用`<img>`标签。在Vue CLI项目中，图片的引用路径需要注意。Vue CLI推荐将静态资源放在`public/...
前端游览器的几种存储方式梳理
imagine_tion的博客
09-26 1520
前端游览器的几种存储方式 1.cookies 2.localstorage 3.sessionstorage 4.Web SQL 5.IndexedDB 1.cookies:在HTML5标准前本地存储的主要方式 优点：是兼容性好，请求头自带cookie方便； 缺点：是只有4K，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行。 2.localStorage：HTML5加入的以键值对（Key-Value）为标准的方式 优点：操作方便，永久性存储（除非手动删除），
前端有几种存储方式？
weixin_47450807的博客
04-16 6250
一、写在前面 前端的存储方式也是重中之重，下面来总结一下前端存储方式的种类。 二、总结 主要存在四种：cookie,localStorage,sessionStorage,indexedDB。 2.1、cookies： 在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装。 2.2、localStorage：HTML5加⼊的以键值对(Key-Value)为标准
本地存储和离线缓存
qq_34758991的博客
04-01 2615
本地存储和离线缓存前端的存储方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5离线存储等1、本地存储1.cookie在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储
2.前端存储的几种方式及其区别
qq_24871849的博客
12-03 356
1.localSrorage localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 存储方式： 以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。 常用的api: getItem //取记录 setIten//设置记录 removeItem//移除记录 key//取key所对应的值 clear//清除记录 2.sessionstorage 与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，
前端数据存储方式
冲鸭^
08-28 4009
Cookie cookie 用于存储web页面的用户信息。 cookie 是一些数据，存储在你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。 当用户访问web页面时，他的名字记录在cookie中。 在用户下一次访问该页面时，可以再cookie中读取用户的访问记录。 Cookie...
前端存储三种方式cookie、localStorage、sessionStorage，以及区别
qq_47443027的博客
03-18 381
1、sessionStorage（会话存储） --生命周期：浏览器打开到关闭的过程 大小：5M 保存的位置：浏览器端 方法都有哪些： setItem('key',value)设置item对象 getItem('key') 得到item对象的值 removeItem('key') 移除item对象 2、lovcalStorage(永久存储) --生命周期：永久，除非人为删除 大小：5M甚至更大 保存的位置：浏览器端 方法都有哪些： setItem('key',value)设置...
前端常用的存储方式
weixin_42760852的博客
08-24 291
localstorage： 永久保存在浏览器里面；session： 关闭网页就清除了信息；localstorage和 session相比较于cookie,存储的体积更大，可以存储。localstorage和 session 不同在于。特点：可设置失效时间，存储体积大小约4KB;localStorage存储。
前端存储方式总结
qq_42874319的博客
07-15 1140
前端存储方式总结 1. Cookie存储 Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。 Cookie是一小段文本信息，伴随着用户请求在 Web 服务器和浏览器之间传递，其大小限制在4k左右（不同浏览器略有不同）。 1.1 Cookie的格式 因为浏览器提供了 cookie 属性给 JavaScript，所以可以通过 document.cookie 来访问这个页面中的cookie。 这是一串字符串，仔细观察，我们可以发现规律。每个 cookie 都以名/值对的形式
对cookie有几种安全处理方式？
最新发布
05-25
有以下几种处理方式： 1. HttpOnly：设置 HttpOnly 属性可以防止 JavaScript 脚本获取到 cookie 的值，从而防止 XSS 攻击。 2. Secure：设置 Secure 属性可以保证 cookie 只能在 https 协议下传输，从而防止中间人...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值