位置: IT常识 - 正文

浏览器本地存储的四种方式(浏览器本地存储的方式)

编辑:rootadmin
浏览器本地存储的四种方式

推荐整理分享浏览器本地存储的四种方式(浏览器本地存储的方式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:浏览器本地存储覆盖漏洞,浏览器本地存储技术,浏览器本地存储权限怎么开,浏览器本地存储和会话存储,浏览器本地存储和会话存储,浏览器本地存储权限怎么开,浏览器本地存储和会话存储,浏览器本地存储和会话存储,内容如对您有帮助,希望把文章链接给更多的朋友!

浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB,其中WebStorage又分为localStorage(本地存储)和sessionStorage(会话存储),下面我们一一介绍:

1.Cookie

Cookie最开始并不是用于本地存储的,而是为了弥补HTTP在状态管理上的不足:

HTTP是一个无状态的协议,客户端向服务器发送请求,服务器返回响应,但是下一次发送请求时服务端就无法识别客户端的身份信息,故而产生了Cookie。

Cookie本质上是浏览器里面存储的一个很小的文本文件,内部以键值对的方式存储。向同一个域名下发送请求都会携带相同的Cookie,服务器拿到Cookie进行解析,就能拿到客户端的状态。

也就是说,Cookie的作用就是用来做状态存储的。

cookie的具体实现过程:

当用户访问web服务器后,web服务器会获取用户的状态并且返回一些数据(cookie)给浏览器,浏览器会自动储存这些数据(cookie)。当用户再次访问web服务器,浏览器会把cookie放到请求报文中发送给web服务器,web服务器就会获取到了用户的状态。基于这次用户的状态方便用户进行其他业务的访问,并且web服务器可以设置浏览器保存cookie的时间,cookie是有域名的概念,只有访问同一个域名的时候才会把之前相同域名返回的cookie携带给该web服务器。

缺陷:

容量缺陷:Cookie的体积上限只有4KB,只能用来存储少量的信息。性能缺陷:Cookie是紧跟域名的,不管域名下面的某个地址需不需要这个Cookie,它都会携带上完整的Cookie。这样随着请求数据的增多,很容易造成性能上的浪费。安全缺陷:由于Cookie以纯文本的形式在浏览器和服务器中传递,很容易被非法用户截获,然后进行一系列的篡改,并在Cookie的有效期内重新发送给服务器。另外,在HTTPOnly为false的情况下,Cookie信息能直接通过JS脚本读取。 Cookie属性

代码示例:

document.cookie = "username=ziming; expires=Thu, 16 Dec 2015 12:00:00 GMT; path=/" // 设置cookiedocument.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT" // 删除cookie 2.session(扩展)

cookie和session都是用来跟踪浏览器用户的身份的方式

区别:1.保存方式

cookie保存在浏览器端;

session保存在服务器端

2.使用原理cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。session机制:当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含session id。如果有session id,服务器将根据该id返回对应session对象。如果客户端请求中没有session id,服务器会创建新的session对象,并把session id在本次响应中返回给客户端。3.存储内容:cookie只能保存字符串类型,以文本的方式。session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)4.存储的大小:cookie:单个cookie保存的数据不能超过4kb。session大小理论上没有限制。5.安全性:cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;session的安全性大于cookie。6.应用场景:

cookie:

判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须重新填写登录的相关信息。保存上次登录的时间等信息。保存上次查看的页面浏览计数

session:Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。

网上商城中的购物车保存用户登录信息将某些数据放入session中,供同一用户的不同页面使用防止用户非法登录7.缺点:

cookie:

大小受限,不能超过4kb;用户可以操作(禁用)cookie,使功能受限;安全性较低;有些状态不能保存在客户端;每次访问都要传送cookie给服务器,浪费带宽;cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

session:

Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。依赖于cookie(session id保存在cookie),如果禁用cookie,则要使用URL重写,不安全创建session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。3.Web storage API (localStorage、sessionStorage)浏览器本地存储的四种方式(浏览器本地存储的方式)

Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的Web Storage存储机制。

Web Storage提供两种类型的API:localStorage和sessionStorage

两者的区别看名字就有大概了解,localStorage在本地永久性存储数据,除非显式将其删除或清空;sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。

1.localStorage

localStorage的存储都是字符串,如果是存储对象,那么在存储时就需要调用JSON的stringify方法,并且在取值时用JSON.parse来解析成对象。

与Cookie的异同:

同:针对一个域名,即在同一域名下,会存储同一段localStorage。

异:

容量:localStorage的容量上线为5MB。只存储在客户端,默认不参与与服务器端的通讯,这样就很好的避免了Cookie带来的性能和安全问题。接口封装:通过localStorage暴露在全局,并通过它的setItem和getItem等方法进行操作。应用场景:

因为localStorage的较大容量和持久特性,可以利用localStorage存储一些内容稳定的资源;例如官网的logo,存储Base64格式的图片资源。

2、sessionStorage

将数据保存在session对象中。

所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

与localStorage的异同:

同:

容量:sessionStorage的容量上线也为5MB。只存储在客户端,默认不参与与服务器端的通讯。接口封装:除了名字变化,sessionStorage的存储方式和操作方式均和localStorage一样。localStorage和sessionStorage只能存储字符串类型。

异:

sessionStorage将数据保存在Session对象中。而localStorage将数据保存在客户端本地的硬件设备,即使浏览器被关闭了该数据依然存在,下次打开浏览器访问网站时可以继续使用。

localStorage:localStorage的生命周期是永久的,sessionStorage的生命周期是在仅在当前会话下有效。

应用场景:可以使用sessionStorage对表单进行维护,将表单信息存储在里面,即使刷新表单也能保证不会让之前的表单信息丢失。可以使用sessionStorage来存储本次浏览记录,即那种关闭页面就不需要的浏览记录。

属性:Storage.length (window.localStorage.length)

方法:

Storage.setItem(name,key) :设置值 Storage.getItem(name):获取 Storage.removeItem(name):删除 Storage.clear():删除所有值 Storage.key():获取键值

4.indexedDB

当数据量不大时,我们可以通过SessionStorage或者LocalStorage来进行存储,但是当数据量较大,或符合一定的规范时,我们可以使用indexedDB数据库来进行数据的存储,indexedDB数据库存储理论上没有大小的限制。

IndexedDB 鼓励使用的基本模式如下所示:

打开数据库。在数据库中创建一个对象仓库(object store)。启动一个事务,并发送一个请求来执行一些数据库操作,像增加或提取数据等。通过监听正确类型的 DOM 事件以等待操作完成。在操作结果上进行一些操作(可以在 request 对象中找到) DEMO

缺点:indexedDB属于非关系型数据库,操作繁琐,对新手不友好

本文链接地址:https://www.jiuchutong.com/zhishi/298751.html 转载请保留说明!

上一篇:vue+node+mysql全栈项目完整记录(nodejs vue)

下一篇:Echarts y轴相关配置(echarts y轴设置)

  • 提高博客访问量的十四个方法(怎么提高访客流量)

    提高博客访问量的十四个方法(怎么提高访客流量)

  • 陌陌怎么隐身(陌陌怎么隐身访问别人的记录)

    陌陌怎么隐身(陌陌怎么隐身访问别人的记录)

  • 台式电脑没有调节亮度怎么办(台式电脑没有调亮度的选项)

    台式电脑没有调节亮度怎么办(台式电脑没有调亮度的选项)

  • 怎么强制解除对方拉黑(怎么强制解除对方拉黑的软件)

    怎么强制解除对方拉黑(怎么强制解除对方拉黑的软件)

  • 华为手机怎么查询是不是新的(华为手机怎么查型号)

    华为手机怎么查询是不是新的(华为手机怎么查型号)

  • 微信突然掉线重新登录(微信突然掉线重新登录后显示恢复聊天记录是怎么回事)

    微信突然掉线重新登录(微信突然掉线重新登录后显示恢复聊天记录是怎么回事)

  • 手机充电发热怎么解决(手机充电发热怎么回事?)

    手机充电发热怎么解决(手机充电发热怎么回事?)

  • 钉钉群昵称已经修改怎么还是没有变化(钉钉群改了名字怎么旧名字还在群里)

    钉钉群昵称已经修改怎么还是没有变化(钉钉群改了名字怎么旧名字还在群里)

  • 网盘和云盘有什么不同(网盘跟云盘的区别)

    网盘和云盘有什么不同(网盘跟云盘的区别)

  • 荣耀20有红外功能吗(荣耀20有红外线)

    荣耀20有红外功能吗(荣耀20有红外线)

  • office2010不激活有影响吗(office2010不激活可以正常使用吗)

    office2010不激活有影响吗(office2010不激活可以正常使用吗)

  • 华为怎么设置闹钟铃声本地音乐(华为怎么设置闹钟在耳机里响)

    华为怎么设置闹钟铃声本地音乐(华为怎么设置闹钟在耳机里响)

  • 本地连接无法连接到internet怎么办(本地连接无法连接DHCP服务器)

    本地连接无法连接到internet怎么办(本地连接无法连接DHCP服务器)

  • 像素多少算高清(相机4800万像素算高吗)

    像素多少算高清(相机4800万像素算高吗)

  • 网络建设的总体原则(网络建设的总体目标主要包括哪几个方面)

    网络建设的总体原则(网络建设的总体目标主要包括哪几个方面)

  • qq群可以加多少人(qq群可以加多少人上限)

    qq群可以加多少人(qq群可以加多少人上限)

  • i77700k配什么显卡合适(i77700配什么显卡最好)

    i77700k配什么显卡合适(i77700配什么显卡最好)

  • 苹果7p有红外线功能吗(苹果14有没有红外线功能)

    苹果7p有红外线功能吗(苹果14有没有红外线功能)

  • ps怎么拉长背景(ps怎么拉长背景颜色)

    ps怎么拉长背景(ps怎么拉长背景颜色)

  • 华为20i的返回键在哪(华为20i返回键在哪)

    华为20i的返回键在哪(华为20i返回键在哪)

  • 淘宝预售在哪里看(淘宝预售在哪里搞)

    淘宝预售在哪里看(淘宝预售在哪里搞)

  • 文档边框怎么弄(文档边框怎么设置)

    文档边框怎么弄(文档边框怎么设置)

  • ipad可以投屏吗(苹果手机怎么投屏ipad)

    ipad可以投屏吗(苹果手机怎么投屏ipad)

  • 苹果xr的录音在哪里(xr的录音在哪)

    苹果xr的录音在哪里(xr的录音在哪)

  •  ofo余额怎么退不了(ofo的账户余额怎么退)

    ofo余额怎么退不了(ofo的账户余额怎么退)

  • 快递费包不包括送货上门
  • 增值税普通发票查询真伪
  • 外币借款本金的汇兑差额
  • 油票发票怎么查真伪
  • 差额冲销
  • 会计凭证辅助项
  • 购房尾款发票什么时候开
  • 发票认证是干嘛
  • 抄报未反写影响开票吗
  • 按月按季申报
  • 小规模企业所得税多少
  • 普通商户怎么开小票
  • 公司借款给个人超过一年未还
  • 补充协议如何生效
  • 劳务发票税率营改增后是多少?
  • 我的初级备考经验--跟老师节奏走
  • 企业微信收款如何同步给别人
  • 代销产品缴纳增值税吗
  • 土地闲置费可以税前扣除吗
  • 新契税法还有优惠吗?
  • 无偿取得土地使用权的会计分录
  • 企业的低值易耗品主要包括什么等
  • 收取客户税点怎么记账
  • 当月未抵扣进项税在进项税额明细表怎么填
  • Windows10如何修复引导
  • 企业债卷利息收入是营业收入吗
  • 应付账款和应收票据区别
  • linux系统文件压缩命令
  • PHP 中dirname(_file_)讲解
  • php数组有哪几种类型
  • php实现观察者模式
  • 合理损耗企业所得税税率
  • 个人股权转让应税凭证名称
  • chrome安装教程
  • vue路由传参的几种方式
  • 小微企业认定标准时间
  • 阿里pv
  • Navicat for MySQL 15 v15.0.27 中文企业正式版(附安装教程) 32/64位 破解版
  • 收到员工的社保费用记什么科目
  • 通行费电子发票平台
  • 增值税专用发票几个点
  • 固定资产清理产生的费用入什么科目
  • pandas模块的主要特点
  • mysql5.7.27安装与配置
  • 财政拨款结转和财政拨款结余以前年度盈余调整
  • 出口销售收入要交印花税吗
  • 小规模企业申报哪些税
  • 确认委托代销手续费的会计分录
  • 营业外支出的会计要素
  • 小规模增值税申报未开票收入怎么填
  • 收到设计费属于什么业务类型
  • 长投对方亏损
  • 多计提费用 怎么冲
  • 购销合同上没有金额,怎么写比较好
  • 固定资产计提折旧的会计科目
  • 代发工资业务流程
  • 退回上年度企业所得税
  • 员工意外险的费用怎么算
  • 购买税盘全额抵扣会计分录
  • 如何用u盘装系统盘
  • win1020h2版好不好
  • win1020h2正式版
  • GhostXP装机版v3.0
  • 深入理解typescript 豆瓣
  • 学习计划表模板
  • 批处理应用实例
  • web应用程序开源框架
  • unity shader cull off
  • javascript Window及document对象详细整理
  • 在web项目中引入什么
  • android 属性动画改变view大小
  • android的事件处理机制
  • 车辆购置税可以抵税吗
  • 如何查询票据真伪信息
  • 出口退税是哪个环节交的
  • 天津本田天虹90摩托车库存
  • 北京地税局报税流程
  • 怎么查询地税信息表
  • 按季申报印花税怎么申报
  • 云南4050人员2020最新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设