浅谈cookie，sessionStorage，localStorage
说说前端2019-12-12 15: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 过期时间之前一直有效，即使窗口或浏览器关闭
举报/反馈
0
0
收藏
分享
