js数据存储Cookie、localStorage、sessionStorage

最新推荐文章于 2023-08-30 09:30:23 发布
最新推荐文章于 2023-08-30 09:30:23 发布
阅读量280 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyk5928/article/details/102734467
版权
本文介绍了JavaScript中的三种数据存储方式：Cookie、localStorage和sessionStorage。它们的特点包括存储空间、内容类型、生命周期和服务端通信。localStorage存储无限期有效，而sessionStorage在页面关闭后失效。两者都不参与服务端通信，遵循同源策略，且在无痕模式下可能被禁用。Cookie存储空间有限，每次都随HTTP请求发送，安全性较低，可通过domain和path属性进行控制。
摘要由CSDN通过智能技术生成

localstorage(本地存储)、sessionStorage(会话存储)

①存储特点

  • 存储空间限制：一般为5MB或者更大，拓展了cookie的4KB限制
  • 存储内容类型：只能存储字符串，非字符串的在存储之前会被转为字符串
  • 存储位置：存在客户端，且无需持续的将数据发回服务器

②生命周期

  • localStorage 除非自动清除，否则永远有效
  • sessionStorage 关闭当前页面或浏览器后失效

③与服务端通信

  • 仅在客户端保存，不参与服务端通信

③遵循同源策略 

  • 不同浏览器无法共享localStorage、sessionStorage中的信息
  • 同源情况下，不同页面可以共享相同的localstorage,但无法共享sessionStorage的信息

④优缺点

  • 优势：存储空间更大、节省网络流量、快速显示、安全性更高、操作方便
  • 劣势：在浏览器无痕模式下会被禁用

cookie

①存储特点

  • 存储空间限制：4kb
  • 存储内容类型：只支持存储string类型的数据
  • 存储位置：设置了过期时间：硬盘，未设置过期时间：内存

②生命周期

  • 可设置失效时间，若未设置则在浏览器会话关闭时失效

③与服务端通信

  • 每次都会携带在http请求头中

④缺点࿱

最低0.47元/天 解锁文章
仰柔川
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器端数据存储之Cookie、localStorage、sessionStorage
qq_27552077的博客
03-13 2266
Cookie、localStorage、sessionStorage都是存储在浏览器端会话数据，接下来分别详细介绍三种机制。 一、cookie1、什么是cookiecookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。cookie的作用是保存客户端上用户的信息包括登陆信息、偏好设置或者其他数据。在我一篇HTTP协议的文章中提到过Cook
JS 详解 Cookie、 LocalStorage 与 SessionStorage
spirit_peri的博客
09-17 376
基本概念 Cookie Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今
JS中cookie、localStorage和sessionStorage的区别
fangqi20170515的博客
09-02 125
这两个都是h5新出的本地存储的方式；
JS学习中cookies，sessionStorage和localStorage的区别
qf2019的博客
08-14 301
JS学习中cookies，sessionStorage和localStorage的区别，sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会...
【javascript】cookie session localStorage sessionStorage的区别
不忘初心，坚定道路！
12-01 120
背景 这个问的比较多，怕以后忘了，总结复习下。 cookie 由于http是认不得来访者的，所以就想出了cookie这个解决办法：就是你来我这，我给你办张卡，你下次来凭卡认你。 这个cookie是存在浏览器上的，浏览器可以篡改，于是有人想了个办法，做签名，就是在本来的数据后面加一串加密后的码，如果你改了，后面的码和当前这个值不匹配，那么服务器就不认。这个只能相对安全一点。设置签名一般服...
js-储存-Cookie和localStorage及sessionStorage的区别
qq_39406792的博客
09-10 635
Cookie,localStorage,sessionStorage的详解 Storage的API // 储存一个key的值为value localStorage.setItem('key','value'); localStorage.key = 'value'; localStorage['key'] = 'value'; // Storage { name: "Timo",...
Cookie localStorage sessionStorage区别和使用
01-07
Cookie是什么：指某些网站存储在用户本地终端的数据 作用理解：登陆一个网站，保存了数据，近期不用再登录 应用层面来说：cookie是一段字符串； js层面来说：cookie是document对象下的一个String类型的属性 查看...
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
10-14
JavaScript本地储存技术允许开发者在用户浏览器中存储数据，以便在用户再次访问网站时持久化信息。这主要包括三种机制：localStorage、sessionStorage 和 cookie。每种方法都有其特定的使用场景和特性。 1. ...
sessionStorage的范围问题
mkii_hong的博客
11-18 1315
现在有两个页面a.html和b.html a.htm <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <script type="text/javascript"&g
JavaScript本地存储sessionStorage,localStorage,cookie
weixin_43429077的博客
10-12 123
sessionStorage 当前会话有效，页面关闭浏览器清除，大小最大为5MB <script> window.sessionStorage.setItem("name","zzz"); // setItme(key,value)添加数据 window.sessionStorage.getItem("name"); // getItem(key)获取数据 window.sessionStorage.removeItem("name"); // removeIte.
js-cookie,sessionStorage和localStorage
a1_4df的博客
07-25 405
js-cookie cookie存在的不足 由于cookie与IE中提供的持久化用户数据的容量限制以及数据安全问题，不能大量存储数据和安全数据,它存在许多的限制,它存在一些限制如下: 1. cookies的大小被限制在4KB 2. cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽 3. 要正确操纵cookies是很困难的 cookie的简单使用 //创建简单的cookie Cookies.set('name', 'value'); //创建有
LocalStorage 和 SessionStorage会占用多少空间
最新发布
m0_57236802的博客
08-30 1987
和的存储限制因浏览器而异，但通常情况下，每个域名的存储限制大约为5MB到10MB。这些存储机制主要用于存储字符串数据，因此它们通常不适用于存储大量的媒体文件或其他大型数据。
探究跨域问题
weixin_43846755的博客
05-28 160
跨域问题 为什么有跨域的问题-----因为浏览器的同源策略 为什么要有同源策源----如果没有会发生什么 cookie被其他人知道，导致登录身份被他人所用 比如：我登录了a网站，在a网站浏览页面；之后，我又打开b网站。 由于登录a网站时，浏览器已经从服务器中获取cookie（在响应投的set-cookie字段里），之后每次向服务器发送请求，浏览器都会自动地将cookie放在请求头中（cookie字段）发送给服务器。当我打开b网站时，b网站可以向服务器发送请求。这个请求会携带有浏览器自动设置的cook
JS中localStorage和sessionStorage
weixin_46051260的博客
07-31 710
localStorage和sessionStorage
详解JavaScript的cookie、localstorage、session、离线存储
ANNENBERG的博客
10-27 359
javascript用于存储的方式可谓是多种多样，善于应用‘存储’可以大大的提高网站的性能，博主结合日常开发常见需求做一下总结，希望对大家有用～ 1.cookie 存储大小： 4kb左右，以20个为上限， 清理机制：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。 主要应用： 购物车，登录状态 缺陷： 同域内http请...
HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
热门推荐
11-09 3万+
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 HTML5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的
localStorage sessionStorage cookie
08-19
localStorage、sessionStorage和cookie都是在Web开发中用于在浏览器端存储数据的机制。 localStorage是一种持久化存储机制，数据会一直保存在浏览器中，直到被显式清除或通过代码删除。存储在localStorage中的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值