浏览器本地存储

简介: 浏览器本地存储

浏览器本地存储


- 在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage
- html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage
- sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储
- 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的


web storage和cookie的区别

  • Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用
  • 除此之外,WebStorage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie
  • 但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
  • 浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage
  • localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等


cookie 和session 的区别:

  • 1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
  • 2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
  • 考虑到安全应当使用session。
  • 3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
  • 考虑到减轻服务器性能方面,应当使用COOKIE。
  • 4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
  • 5、所以个人建议:
  • 将登陆信息等重要信息存放为SESSION
  • 其他信息如果需要保留,可以放在COOKIE中


描述 cookies、sessionStorage 和 localStorage 的区别?


  • 与服务器交互:
  • cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)
  • cookie 始终会在同源 http 请求头中携带(即使不需要),在浏览器和服务器间来回传递
  • sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存
  • 存储大小:
  • cookie 数据根据不同浏览器限制,大小一般不能超过 4k
  • sessionStorage 和 localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
  • 有效期时间:
  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效,与浏览器是否关闭无关
相关文章
|
3月前
|
存储 JavaScript 程序员
Vue学习之---浏览器本地存储(8/17)
这篇文章介绍了Vue中浏览器本地存储的使用方法,包括基础知识、localStorage和sessionStorage的代码实例及其测试效果,并提供了相关的API和操作示例。
Vue学习之---浏览器本地存储(8/17)
|
6月前
|
存储 JSON 安全
[浏览器系列] : 客户端本地存储
[浏览器系列] : 客户端本地存储
71 2
[浏览器系列] : 客户端本地存储
|
6月前
|
存储
【Vue2.0学习】—浏览器本地存储(五十七)
【Vue2.0学习】—浏览器本地存储(五十七)
|
存储 移动开发 缓存
📚现代化浏览器本地存储解决方案以及落地实践
前言 最近在项目需要做数据存储,调研到了localforage这个库,在项目中也使用了,接下里我来介绍下它的实现方式以及在React项目如何落地(直接copy下面的hooks解决方案就可以在项目中使用了) 使用
148 0
|
存储 Web App开发 缓存
前端(二):浏览器本地存储 - cookie、localStorage、sessionStorage
浏览器本地存储 - cookie、localStorage、sessionStorage
140 0
|
存储 缓存 移动开发
浏览器缓存机制(三):本地存储
浏览器缓存机制(三):本地存储
187 0
|
存储 缓存 API
vue2:浏览器本地存储(webStorage)
vue2:浏览器本地存储(webStorage)
314 0
vue2:浏览器本地存储(webStorage)
|
存储 Web App开发 JSON
浏览器专题系列 - 本地存储
浏览器专题系列 - 本地存储
|
存储 HTML5 移动开发