Javascript本地存储的方式有哪些？区别及应用场景

最新推荐文章于 2024-04-06 08:27:25 发布

夏兮颜☆

最新推荐文章于 2024-04-06 08:27:25 发布

阅读量329

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_69892739/article/details/128452474

版权

17 篇文章 0 订阅

订阅专栏

一. 方式

JavaScript本地缓存的方法有：

cookie是指某些网站为了辨别用户身份而储存在用户本地终端上的数据。
是为了解决 HTTP无状态导致的问题。
cookie是小型文本数据，不超过4k，cookie是有有效期，安全性的。
cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取，导致安全风险

特点：

一些使用方式
设置

localStorage.setItem('username','fxh');

获取

localStorage.getItem('username')

获取键名

localStorage.key(0) //获取第一个键名

删除

localStorage.removeItem('username')

一次性清除所有的存储

localStorage.clear()

缺点：

localStorage.setItem('key', {name: 'value'});
console.log(localStorage.getItem('key')); // '[object, Object]'

sessionStorage和localStorage的用法基本一致，sessionStorage是一旦页面关闭，sessionStorage将会删除数据。

1.生命周期（有效时间）：

Cookie：可以设置失效时间，没有设置的话，默认是关闭浏览器后失效。 localStorage：除非被手动清除，否则将会永久保存。
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

2.存储大小

cookie：4KB左右 localStorage和sessionStorage：可以保存5MB的信息。

3.http请求

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信。

4.易用性

cookie：需要程序员自己封装，源生的Cookie接口不友好
localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

5.数据与服务器之间的交互方式

Cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
SessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用的。其他情况下，可以使用storage，就用storage。
storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

在这里插入图片描述

关注