JS本地存储的方式？区别？应用？

一、四种存储方式：

1.cookie

不超过4kb
在过期时间之前一直有效，即使会话或者浏览器关闭
会自动将数据传递到服务器，服务器也可以写cookie到客户端

2.localstorage

存储大小可以达到5M
只要不主动删除，数据永久储存
不会将数据发送给服务器，仅在本地储存
存储信息在同一域中是共享的，受同源策略的限制
设置 localstorage.setItem(‘username’,’cuuc’)
获取 localstorage.getItem(‘username’)
获取键名 localstorage.key(0)
删除 localstorage.removeItem(‘username’)
清空所有存储 localstorage.clear()
缺点：
1.无法像cookie一样设置过期时间；
2.只能存入字符串，无法直接 存入对象

3.sessionStorage

存储大小可以达到5M
页面关闭，sessionStorage将会删除数据
不会将数据发送给服务器，仅在本地储存
sessionStorage也具有上述相同的属性和方法

注意：localstorage、sessionStorage存储对象或数组时，需要将其更换为JSON字符串，然后再进行存储。
4.indexDB

优点：
储存量理论上没有上限
所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
原生支持储存JS的对象
是个正经的数据库，意味着数据库能干的事它都能干
缺点：
操作非常繁琐
本身有一定门槛

二、区别：

1.存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
2.有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3.数据与服务器的交互方式：cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

三、应用场景：

1.标记用户与跟踪用户行为的情况，推荐使用cookie
2.适合长期保存在本地额度数据（令牌），推荐使用localstorage
3.敏感账号一次性登录，推荐使用sessionStorage
4.存储大量数据的情况、在线文档保存编辑历史的情况，使用indexDB

localstorage和sessionStorage的区别：

1.存储周期不同；
2.共享范围不同：前者在同源页面共享存储的值；后者仅在当前页面共享存储的值；

JS本地存储的方式？区别？应用？相关推荐

详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
JS中本地存储的方式有哪些？
我目前了解到的本地存储的方式有以下四种: 1.localStorage 2.sessionStorage 3.cookie 4.indexedDB 注:因为indexedDB本身是一个数据库,操作复杂 ...
【前端知识之JS】JS本地存储
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍本地存储的四种方式,以及他们的比较和应用. 文章目录前言一.本地存储的方式 1.cookie 2.localStorage 3.sessio ...
Vuex是什么？以及和本地存储localstorage的区别
先来说一下Vuex是什么? 官方给出的解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
浏览器本地存储的方式~~~~~
本地存储的方式:localStorage 和sessionStorage. 一.localStorage 1.特点:1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样). ...
Javascript本地存储的方式有哪些？区别及应用场景？
# 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage indexedDB # cookie Cookie,类型为 ...
JS本地存储方式，结合案例一看就懂
前端本地存储,即数据存储在浏览器中. 常用的方法有cookie.localStorage.sessionStorage 一.Cookie(常用于获取储存登录的用户信息) 作用:用于浏览器和服务器端进行 ...
JS本地存储和会话存储的区别
1.localStorage本地存储 localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在.存放数据大小为一般为5M ...
js本地存储函数封装基于localStorage本地存储
函数封装 //基于localStorage本地存储 var store={set:function(name, value, day) { // 设置let d = new Date()let tim ...

JS本地存储的方式？区别？应用？

JS本地存储的方式？区别？应用？相关推荐

最新文章

热门文章