Web存储-localStorage和sessionStorage

Web存储

将数据存储到用户的电脑上,缓解服务器压力,提高体验。

传统方式是document.cookie来进行存储,但是cookie存储大小只有4K左右,并且解析也相当的复杂,每一次发送请求都会携带上cookie,会造成带宽的浪费。

所以HTML5规范则提出解决方案。sessionStorage和localStorage

特性

设置、读取方便
容量较大,sessionStorage约5M,localStorage约20M
只能存储字符串,可以将对象JSON.stringify()编码后存储

1、API详解

setItem(key,value)——设置存储内容
getItem(key)——读取存储内容
removwItem(key)——删除键值为key的存储内容
clear()——清空所有内容
key(n)——以索引值来获取键名

length——存储的数据的个数

web 存储分为sessionStorage和localStorage  

web 存数据
window.localStorage.setItem('LocalUsername','逆夏');
window.sessionStorage.setItem('sessionUsername','逆夏');

获取数据
alert(window.localStorage.getItem('LocalUsername'));
alert(window.sessionStorage.getItem('sessionUsername'));

通过key(下标)获取键名
alert(window.localStorage.key(0));
alert(window.sessionStorage.key(0));

删除数据
window.localStorage.removeItem('LocalUsername');
window.sessionStorage.removeItem('sessionUsername');

整体清除
window.localStorage.clear();
window.sessionStorage.clear();

数据的长度
alert(window.localStorage.length);
alert(window.sessionStorage.length);

window.localStorage

LocalStorage的数据是永久存储在电脑里面,除非手动删除或者用代码清除,关浏览器,关电脑。
可以多窗口共享数据(同源策略)。
运用场景:一些不涉及到安全的一些数据(不要太过庞大)都可以存储到本地

同源策略:同域名,同协议,同端口


window.sessionStorage

sessionStorage的数据是临时数据,当这个页面被关闭的时候就自动清除,刷新是不会清除的。
不能多窗口下数据共享(同源策略)但是页面跳转(如a链接)的时候可以通过session实现数据共享
运用场景:在一些单页面(spa)的运用中,进行页面传值的时候比较有用

cookie、localStorage、sessionStorage的区别:

相同点:都是存储数据,存储在web端,并且都是同源策略下的

不同点:

1、大小不同

cookie只有4k,小,并且每一次请求都会带上cookie,体验不好,浪费带宽
session和local直接储存在本地,请求不会携带,并且容量比cookie大很多

2、生命周期不同
session是临时会话,当窗口被关闭的时候就清除掉。local永久存在。cookie有过期时间

3、cookie和local都可以支持多窗口共享。而session不支持多窗口共享,但是支持a链接跳转的新窗口

存储对象的转换

web存储只能存贮字符串,所以我们只能将对象转换成字符串然后再存储

JSON.stringify()——将json对象转成字符串

JSON.parse()——将字符串转成json对象

var obj = {
  "name":"逆夏",
  "age":24
}
obj = JSON.stringify(obj);
console.log(typeof obj);//string

window.localStorage.setItem("哈哈",obj);
var a = window.localStorage.getItem("哈哈");
console.log(typeof a);//string

a = JSON.parse(a);
console.log(typeof a);//object
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值