首页 > 编程语言 >JavaScript 中 cookie、localStorage 和 sessionStorage 三者的区别(转载)

JavaScript 中 cookie、localStorage 和 sessionStorage 三者的区别(转载)

时间:2024-03-13 21:56:35浏览次数:18  
标签:浏览器 跨域 sessionStorage JavaScript 保存 localStorage cookie

1、三者区别

  • cookie 用来保存登录信息,大小限制为 4KB 左右
  • localStorage 是 Html5 新增的,用于本地数据存储,保存的数据没有过期时间,一般浏览器大小限制在 5MB
  • sessionStorage 接口方法和 localStorage 类似,但保存的数据的只会在当前会话中保存下来,页面关闭后会被清空。
名称 生命期 大小限制 与服务器通信 是否可以跨域
cookie 一般由服务器生成,可设置失效时间。如果在浏览器端生成 Cookie,默认是关闭浏览器后失效 4KB 每次都会携带在 HTTP 头中,如果使用 cookie 保存过多数据会带来性能问题 一般不可,相同 domain 下可以允许接口请求携带 cookie
localStorage 除非被清除,否则永久保存 5MB 仅在浏览器中保存,不与服务器通信 不可
sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除 5MB 仅在浏览器中保存,不与服务器通信 不可

 

2、localStorage 进行怎么进行跨域存储?

localStorage 是不可以进行跨域操作的,但是想进行跨域操作可以使用 postMessage,websocket 进行变相的跨域操作。

 

3、localStorage和sessionStorage的生命周期区别

  • localStorage存储的数据在浏览器关闭后仍然可用,除非用户主动删除;
  • sessionStorage仅在当前浏览器会话期间有效,关闭浏览器或切换标签页后,其存储的数据会被清空。

 

原文链接

 

标签:浏览器,跨域,sessionStorage,JavaScript,保存,localStorage,cookie
From: https://www.cnblogs.com/OpenCoder/p/18071625

相关文章

  • [Javascript] Generator & Iterators exercise
    Generatorcanrunwithfor..ofand...,whichwillonlyemityieldvalues Forexample:function*count(){yield1;yield2;return3;}for(constvalueofcount()){console.log(value)//1,2}console.log([...count()])//[1,2] ......
  • [Javascript] Class & Prototypes
    CreateanewUserinstancewouldcreateanewloginfunctioninmemoryeachtime?classUser{constructor(username){this.username=username;}login(){...}}constuser1=newUser("johndoe");constuser2=newUser(&qu......
  • 【Javascript】 Promise 对象(一)
    Promise的含义Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操......
  • JavaScript学习--splice()函数入门与精通
    一、splice入门splice方法:通过删除(两个参数)或替换现有元素(三个参数)或者原地添加新的元素(三个参数)来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。参数:index——必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置(从1开始)。howmany——必需......
  • 浅谈JavaScript
    第一章JavaScript学前准备1.JavaScript简介(1)1992年Nombas的scriptease奠定了JavaScript思想理念;(2)受当时网速的限制,很多操作过程很漫长,如用户注册个账号,先提交到服务器去验证合法性,然后再返回给用户。Netscape发现了这个问题并开发了JavaScript语言,同时微软也开发了一个叫J......
  • JavaScript 高阶技巧
    0x01深浅拷贝开发中经常需要拷贝(复制)一个对象,如果直接赋值,则对拷贝对象的修改会影响到源对象consto1={a:1,b:2}consto2=o1console.log(o2)//{a:1,b:2}o2.a=3console.log(o1)//{a:3,b:2}console.log(o2)//{a:3,b:2}原因在于,直......
  • 跨端轻量JavaScript引擎的实现与探索
    一、JavaScript1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史:时间版本说明1997年7月ES1.0发布当年7月,ECMA262标准出台1998年6月ES2.0发布该版本修改完全符合ISO......
  • 清除缓存问题 localStorage浏览器本地缓存需清除网站数据 sessionStorage 创建各自的
    localStorage浏览器本地缓存pc需清除网站数据,或者开启新的无痕网页移动端app需进入设置页面,点击“清除浏览数据”选项;pc端的开启无痕就相当于开启一个新的浏览器无痕项目,但是app端开启无痕不会自动先清除之前已保存的数据sessionStorage浏览器页面缓存Window.sessionStorage......
  • JavaScript逆向之有道翻译加解密全过程解析
    本篇文章用于解析有道翻译中的加解密全过程url:https://fanyi.youdao.com/index.html#/加密访问网址,输入框中随便输入一个英文单词,查看触发流量包,只看Fetch/XHR类型的。这里主要关注webtranslate的这条,请求参数和响应数据都是有加密的,主要了解其的加解密逻辑。根据url定位......
  • [JavaScript] JavaScript的时间与时区
    0序言第1章节,原创,主要关注:JS的时间、时区国际化问题第2章节,主要来自于第1篇参考文献(系对第1章节的基础知识的夯实)1JavaScript时间、时区的国际化(案例)本案例等同于问题:JavaScript从浏览器根据不同时区获取时间的问题假定现在有两台Windows笔记本电脑。Step1设置......