Web存储-localStorage和sessionStorage

    xiaoxiao2021-03-25  91

    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
    转载请注明原文地址: https://ju.6miu.com/read-18689.html

    最新回复(0)