javaScript 本地存储(也称本地缓存)的⽅法我们主要讲述以下四种:
cookie
sessionStorage
localStorage
indexedDB
cookie
Cookie ,类型为「小型文本文件」,指某些网站为了辨别用户身份而储存在用户本地终端上的数据。
是为了解决 HTTP 无状态导致的问题
作为一段一般不超过 4KB 的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于
控制 cookie 有效期、安全性、使用范围的可选属性组成
localStorage
HTML5 新方法,IE8及以上浏览器都兼容
特点
生命周期:持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的
存储的信息在同一域中是共享的
当本页操作(新增、修改、删除)了 localStorage 的时候,本页面不会触发 storage 事件,但是别的页面会触发 storage 事件。
大小:5M(跟浏览器厂商有关系)
localStorage 本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
受同源策略的限制
sessionStorage
sessionStorage 和 localStorage 使用方法基本一致,唯一不同的是生命周期,一旦页面(会话)关闭,
sessionStorage 将会删除数据
扩展的前端存储方式
indexedDB 是⼀种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实
现对该数据的高性能搜索
优点:
储存量理论上没有上限
所有操作都是异步的,相⽐ LocalStorage 同步操作性能更⾼,尤其是数据量较⼤时
原⽣⽀持储存 JS 的对象
是个正经的数据库,意味着数据库能⼲的事它都能⼲
缺点:
操作⾮常繁琐
本身有⼀定门槛
关于 cookie 、 sessionStorage 、 localStorage 三者的区别主要如下:
存储⼤⼩: cookie 数据⼤⼩不能超过 4k , sessionStorage 和 localStorage 虽然也有存 储⼤⼩的限制,但⽐ cookie ⼤得多,可以达到5M或更⼤
有效时间: localStorage 存储持久数据,浏览器关闭后数据不丢失除⾮主动删除数据; sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除; cookie 设置的 cookie 过期时间 之前⼀直有效,即使窗⼝或浏览器关闭
数据与服务器之间的交互⽅式, cookie 的数据会⾃动的传递到服务器,服务器端也可以写 cookie 到客户端;
sessionStorage 和 localStorage 不会⾃动把数据发给服务器,仅在本 地保存
应⽤场景
标记⽤户与跟踪⽤户⾏为的情况,推荐使⽤ cookie
适合⻓期保存在本地的数据(令牌),推荐使⽤ localStorage
敏感账号⼀次性登录,推荐使⽤ sessionStorage
存储⼤量数据的情况、在线⽂档(富⽂本编辑器)保存编辑历史的情况,推荐使⽤ indexedDB
Javascript本地存储的⽅式有哪些?区别及应用场景
最新推荐文章于 2023-06-04 18:45:27 发布