浅谈cookie,sessionStorage,localStorage

说说前端

发布时间:19-12-1215:23

在客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据。

(以往)在客户端有五种数据存储方法,而目前就只有四种常用方法了(其中一种被废弃了):

CookieLocal StorageSession StorageIndexedDBWebSQL (被废弃)

Cookie

Cookie 就是用来在本地缓存记住一些状态的,一个 Cookie 一般都包含domin(所属域)、path、Expires(过期时间)等几个属性。服务端可以通过在响应头里的 set-cookies 来将状态写入客户端的 Cookie 里。下次客户端发起请求时可以将 Cookie附带在req里请求到客服端。httpOnly(不可以操作)

Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话,追踪用户信息等事情。此外,客户端也用使用 cookies 存储数据。因而,cookies 常被用于存储一些通用的数据,如用户的首选项设置。Cookies 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 cookies:

// Create

document.cookie = "user_name=Ire Aderinokun"

document.cookie = "user_age=25maxage=31536000secure"

// Read (All)

console.log( document.cookie )

// Update

document.cookie = "user_age=24maxage=31536000secure"

// Delete

document.cookie = "user_name=Ire Aderinokunexpires=Thu, 01 Jan 1970 00:00:01GMT"

Cookies 的优点

能用于和服务端通信

当 cookie 快要自动过期时,我们可以重新设置而不是删除

Cookie 的缺点

增加了文档传输的负载

只能存储少量的数据

只能存储字符串

潜在的 安全问题

自从有 Web Storage API (Local and Session Storage),cookies 就不再被推荐用于存储数据了

所有主流浏览器均支持 Cookie.

Local Storage

Local Storage 是 Web Storage API 的一种类型,能在浏览器端存储键值对数据。

Local Storage 因提供了更直观和安全的API来存储简单的数据,被视为替代Cookies 的一种解决方案。从技术上说,尽管 Local Storage 只能存储字符串,但是它也是可以存储字符串化的JSON数据。这就意味着,Local Storage 能比 Cookies 存储更复杂的数据。Local Storage 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 Local Storage:

// Create

const user = { name: 'Ire Aderinokun', age: 25 }localStorage.setItem('user', JSON.stringify(user))

// Read (Single)

console.log( JSON.parse(localStorage.getItem('user')) )

// Update

const updatedUser = { name: 'Ire Aderinokun', age: 24 }

localStorage.setItem('user', JSON.stringify(updatedUser))

// Delete

localStorage.removeItem('user')

Local Storage 的优点

相比于Cookie:其提供了更直观地接口来存储数据更安全,能存储更多数据Local Storage 的缺点只能存储字符串数据浏览器支持IE8+/Edge/Firefox 2+/Chrome/Safari 4+/Opera 11.5+(caniuse)

Session Storage

Session Storage 是 Web Storage API 的另一种类型。和 Local Storage 非常类

似,区别是 Session Storage 只存储当前会话页(tab页)的数据,一旦用户关闭当前页或者浏览器,数据就自动被清除掉了。

Session Storage 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 Session Storage:

// Create

const user = { name: 'Ire Aderinokun', age: 25 }sessionStorage.setItem('user', JSON.stringify(user))

// Read (Single)

console.log( JSON.parse(sessionStorage.getItem('user')) )

// Update

const updatedUser = { name: 'Ire Aderinokun', age: 24 }

sessionStorage.setItem('user', JSON.stringify(updatedUser))

// Delete

sessionStorage.removeItem('user')

优点,缺点和浏览器支持

和 Local Storage 一样

sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念,sessionStorage是在同源的同窗口中,始终存在的数据,也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一个页面,数据仍然存在,关闭窗口后sessionStorage就会被销毁,同时“独立”打开的不同窗口,即使同一页面,sessionStorage对象也是不同的

请描述一下 cookie,sessionStorage 和 localStorage 的区别?

cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上 的数据(通常经过加密)cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏 览器和服务器间来回传递。sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地 保存。

存储大小:

cookie 数据大小不能超过 4k。sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

有效期(生命周期):

localStorage: 存储持久数据,浏览器关闭后数据不丢失除非主动 删除数据;sessionStorage: 数据在当前浏览器窗口关闭后自动删除。cookie: 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭

返回顶部