浏览器本地存储Cookie,LocalStorage ,SessionStorage

266 阅读2分钟

@TOC


浏览器本地存储

  1. 浏览器本地存储方式

(1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,Cookie就出现了。Cookie的大小只有4kb,它是一种纯文本文件,每次发起HTTP请求都会携带Cookie

(2)LocalStorage LocalStorage是HTML5新引入的特性,由于有的时候我们存储的信息较大,Cookie就不能满足我们的需求,这时候LocalStorage就派上用场了

LocalStorage的优点: 在大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息 LocalStorage是持久储存并不会随着页面的关闭而消失,除非主动清理,不然会永久存在 仅储存在本地,不像Cookie那样每次HTTP请求都会被携带

LocalStorage的缺点: 存在浏览器兼容问题,IE8以下版本的浏览器不支持

(3)SessionStorage

SessionStorage和LocalStorage都是在HTML5才提出来的存储方案,SessionStorage 主要用于临时保存同一窗口(或标签页)的数据,刷新页面时不会删除,**关闭窗口或标签页之后将会删除这些数据。

SessionStorage与LocalStorage对比 SessionStorage和LocalStorage都在本地进行数据存储; SessionStorage也有同源策略的限制,但是SessionStorage有一条更加严格的限制,SessionStorage只有在同一浏览器的同一窗口下才能够共享; LocalStorage和SessionStorage都不能被爬虫爬取

(4)Cookie、LocalStorage、SessionStorage区别

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage

cookie: 其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服务器端。cookie 最多能存储 4 k 数据,它的生存时间由 expires 属性指定,并且 cookie 只能被同源的页面访问共享。

sessionStorage: html5 提供的一种浏览器本地存储的方法,它借鉴了服务器端 session 的概念,代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据,它在当前窗口关闭后就失效了,并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

localStorage: html5 提供的一种浏览器本地存储的方法,它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是,除非手动删除它,否则它不会失效,并且 localStorage 也只能被同源页面所访问共享。