前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍本地存储的四种方式，以及他们的比较和应用。

文章目录

前言
一、本地存储的方式
- 1、cookie
- 2、localStorage
- 3、sessionStorage
- 4、扩展的前端存储方式
二、三种存储方式的区别
三、应用场景

一、本地存储的方式

1、cookie

Cookie类型为小型文本文件，指某些网站为了辨别用户身份而存储在用户本地终端上的数据，是为了解决HTTP无状态导致的问题。
Cookie文件一般不超过4KB，由一个名称（Name）、一个值（Value）和其它几个用于控制cookie有效期、安全性、使用范围的可选属性组成。
但是cookie在每次请求中都会被发送，如果不适用HTTPS对其加密，它保存的信息就容易泄漏，导致安全风险。如，在一些使用cookie保持登录的网站上，如果cookie被窃取，他人很容易利用你的cookie在假扮你登录。
Cookie的常用属性：

属性	作用	例子
Expires	设置Cookie的过期时间	Expires=Wed, 21 Oct 2015 07:28:00 GMT
Max-Age	设置在 Cookie 失效之前需要经过的秒数（优先级比Expires高）	Max-Age=604800
Domain	指定了 Cookie 可以送达的主机名
Path	指定了一个 URL路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部	Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部
Secure	只应通过被HTTPS协议加密过的请求发送给服务端

cookie的使用

document.cookie = '名字=值';

cookie的修改：首先要确定domain和path属性都是相同的，否则就会创建出一个新的cookie。

Set-Cookie:name=aa; domain=aa.net; path=/  # 服务端设置
document.cookie =name=bb; domain=aa.net; path=/  # 客户端设置

cookie的删除：最常用的方法就是给cookie设置一个过期的事件，cookie过期后就会被浏览器删除。

2、localStorage

特点：

生命周期：持久化的本地存储，除非主动删除数据，否则数据永远不会过期；
存储的信息在同一域中是共享的；
当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件，但是别的页面会触发storage事件。
大小：5M（跟浏览器厂商有关系）
localStorage本质上是对字符串的读取，如果存储内容多的话，会消耗内存空间，会导致页面变卡
受同源策略的限制

使用：

功能	代码
设置	localStorage.setItem(‘username’,‘cfangxu’);
获取	localStorage.getItem(‘username’)
获取键名	localStorage.key(0) //获取第一个键名
删除	localStorage.removeItem(‘username’)
一次性清除所有存储	localStorage.clear()

缺点：

无法像Cookie一样设置过期的时间；
只能存入字符串，无法直接存对象。

3、sessionStorage

sessionStorage和localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage将会删除数据。

4、扩展的前端存储方式

indexedDB是一种低级的API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
虽然Web Storage对于存储较少量的数据很有用，但对于存储大量的结构化数据来说，这种方法不太方便，这是用IndexDB就很有用。

优点：

存储量理论上没有上限；
所有操作都是异步的，相比LocalStorage同步操作性能更高，尤其是数据量较大时
原生支持存储JS的对象；
就是一个数据库，数据库能做的它都能做。

缺点：

操作非常繁琐；
本身有一定的门槛。

二、三种存储方式的区别

区别	cookie	sessionStorage	localStorage
存储大小	不能超过4K	可以5M或者更大	可以5M或者更大
有效时间	过期时间之前一直有效	当前浏览器窗口关闭自动删除	不主动删除就永久有效
数据与服务器之间的交互方式	自动相互传递	本地保存	本地保存

三、应用场景

场景	推荐
标记用户与跟踪用户行为的情况	cookie
适合长期保存在本地的数据（令牌）	localStorage
敏感账号一次性登录	sessionStorage
存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况	indexedDB

【前端知识之JS】JS本地存储相关推荐

js清空本地存储_JS原理、方法与实践本地存储
本地存储就是指在浏览器中存储数据,是相对于服务器中存储数据来说的. 1. 本地存储的分类浏览器的本地存储主要包括4种方式:Cookie.Storage.SQL数据库和IndexedDB. Cooki ...
JS中本地存储的方式有哪些？
我目前了解到的本地存储的方式有以下四种: 1.localStorage 2.sessionStorage 3.cookie 4.indexedDB 注:因为indexedDB本身是一个数据库,操作复杂 ...
前端学习（1044）:本地存储实现数据录入
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
js清空本地存储_「IPFS红岸智能」js-IPFS 0.50.0性能再次提升
原创:Alex Potsides 原文链接:https://blog.ipfs.io/2020-09-14-js-ipfs-0-50/ 由红岸智能编译亮点在多个选项卡和密码文件之间更快地共享IPF ...
「JavaScript灵魂之问」前端知识梳理之 JS 篇（中篇）
对象基础对象前置知识 /* 对象基础知识 */var teacher = {name: '张三',age: 32,sex: 'male',height: 176,weight: 130,teach: ...
js清空本地存储_详解onenote保存与同步④：本地笔记奇葩的丢失经历
(此文介绍的是我遇到过的,极其奇葩的,丢失onenote本地笔记的惨痛经历.不论是否具有普遍性,对进一步理解缓存还是很有帮助的.大家若有其他丢失经历,可以交流.) 对于onenote本地笔记本而言,由 ...
原生js cookie本地存储
JS cookie 1.概述 cookie也叫HTTP Cookie,最初是客户端与服务器端进行会话(Session)使用的. 如果没写expires,那么下次打开网页,cookie就会消失,这个就是 ...
【第五部分 | JS WebAPI】6：PC端网页特效与本地存储
目录 | 概述 | PC端网页特效之三大系列 1-1 elementObj . offsetXXX 属性 1-2 elementObj . style 和 offset 的区别 1-3 案例:获取鼠标 ...
PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储
目录 PC 端网页特效元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜元素可视 ...
三种本地存储策略的区别
前端常用的三种本地存储策略是什么呢? cookie sessionStorage localStorage cookie 在 h5 之前,本地存储的主要方式就是 cookie ,cookie可以实现少 ...

【前端知识之JS】JS本地存储

前言

文章目录

一、本地存储的方式

1、cookie

2、localStorage

3、sessionStorage

4、扩展的前端存储方式

二、三种存储方式的区别

三、应用场景

【前端知识之JS】JS本地存储相关推荐

最新文章

热门文章