web浏览器数据本地存储

在浏览器中存储主要分为以下三种方式

  1. localstorage 2、sessionStorage 3、cookie

localStorage

生命周期永久,除非用户清除浏览器中的localStorage信息,否则永远存在;

存放数据大小一般为5MB;

仅在浏览器中保存,不参与服务器通信;

API调用:

  localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

  localStorage.getItem("key");//获取名称为“key”的值

  localStorage.removeItem("key");//删除名称为“key”的信息。

  localStorage.clear();//清空localStorage中所有信息

sessionStorage

仅在当前会话下有效,关闭页面或者浏览器后被清除;

存放数据大小一般为5MB;

仅在浏览器中保存,不参与服务器通信;

可以接受源生接口,亦可以再次封装来对Object和Array有更好的支持;

API调用:

  sessionStorage.setItem("key","value"); //以“key”为名称存储一个值“value”

  sessionStorage.getItem("key"); //获取名称为“key”的值

  sessionStorage.removeItem("key"); //删除名称为“key”的信息。

  sessionStorage.clear(); //清空sessionStorage中所有信息

Cookie

生命周期为在cookie设置的过期时间之前一直有效,即使窗口或者浏览器关闭;

存放数据大小为4K;

有存储个数限制(各浏览器不同),一般不超过20个;

与服务器端通信,每次都会携带在HTTP头中,cookie存储数据过多会带来性能问题;

localStorage与sessionStorage区别

我经常用到的存储方式为前两种,因此需要清楚了解它们之间的区别。

localStorage与sessionStorage的API调用方法相同;

不同浏览器无法共享localStorage或sessionStorage中的信息;

相同浏览器的不同页面可以共享相同的localStorage(前提是页面属于相同域名和端口);

相同浏览器的不同页面无法共享sessionStorage的信息;

需要注意的是:页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。这句话的意思是说在当前页面打开的链接和页面,可以访问sessionStorage的数据,或者说在当前页面关联的src链接也可以获取到sessionStorage数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

厚渡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值