快速搞定前端JS面试 -- 第十章 JS-Web-API-存储（cookie、localStorage、sessionStorage）

第十章 JS-Web-API-存储

一、cookie

Cookie的缺点

二、LocalStorage和sessionStorage

两者区别

三、问题解答

描述cookie localStorage sessionStorage 区别

---

题目

描述cookie localStorage sessionStorage区别

知识点

1. Cookie
2. LocalStorage 和 sessionStorage

一、cookie

本身用于浏览器和server通讯

被“借用”到本地存储来

可用dovument.cookie=’...’来修改

Cookie的缺点

1. 存储大小最大为4KB
2. HTTP请求时需要发送到服务器端，增加请求数据量
3. 只能用document.cookie=’...’来修改，太过简陋

二、LocalStorage和sessionStorage

HTML5专门为存储而设计，最大可存5M

API简单易用setItem getItem

不会随着http请求被发送出去

两者区别

1. localStorage数据会永久存储，除非代码或手动删除
2. SessionStorage数据只存储在当前会画，浏览器关闭则清空
3. 一般用localStorage更多一些

LocalStorage.setItem(‘a’, 100)
localStorage.getItem(‘a’)  //”100”
SessionStorage.setItem(‘b’, ’200’)
sessionStorage.getItem(‘b’)    //”200”

三、问题解答

描述cookie localStorage sessionStorage 区别

（1）容量

Cookie存储大小最大为4KB，而 localStorage sessionStorage 最大可存5M

（2）API易用性

Cookie只可用document.cookie=’...’来修改;

 localStorage sessionStorage有俩个setItem getItem简单易用API

（3）是否跟随http请求发送出去

Cookie当HTTP请求时需要发送到服务器端；

 localStorage sessionStorage不会随着http请求被发送出去