JavaScript前端存储SessionStorage、LocalStorage、IndexDB、WebSQL、Cookies

本文链接： https://blog.csdn.net/suo082407128/article/details/95748045

SessionStorage

SessionStorage为前端存储，js通过sessionStorage对象进行操作，作用域为当前会话即当前窗口，窗户关闭时sessionStorage会被清空，从当前页面打开的新窗口会继承父窗口的sessionStorage，但修改新窗口中继承变量时，父窗口内变量不会变化，具体方法：

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

//枚举sessionStorage的方法：
for(let i=0;i<sessionStorage.length;i++){
     let name = sessionStorage.key(i);
     let value = sessionStorage.getItem(name);
}

//删除sessionStorage中存储信息的方法：
sessionStorage.removeItem("key");//删除名称为“key”的信息。
sessionStorage.clear();//清空sessionStorage中所有信息

LocalStorage

js通过localStorage进行操作，localStorage同一协议+主机+端口下共享，无论开多少个窗口,关闭重新打开都是共享的，除非使用代码或者清除缓存，否则不会清除
localStorage的API和sessionStorage一样
例1：
在A窗口http://a.com.cn下调用
localStorage.setItem("key","value")
在B窗口http://a.com.cn/home.html中调用

localStorage.getItem("key")  // 获取到A窗口中的值 
localStorage.setItem("key","value1") //设置key对应的值为value1,A窗口key值同时改变(就是操作的同一个东西)

例2
A窗口https://a.com.cn下调用
localStorage.setItem("key","value")
在B窗口https://a.com.cn/home.html中调用

localStorage.getItem("key")  // 由于B窗口和A协议不同，因此获取不到值
localStorage.setItem("key","value1") //这里当然也不会改变A窗口值

SessionStorage和LocalStorage都是键值对存储，value值仅能为字符串

Cookie

Cookie存储在前端，后端也可以操作，这里不再赘述对Cookie的操作，推荐使用第三方插件操作Cookie,Cookie有过期时间

Cookies和LocalStorage
相同点：作用范围相同
不同点：

Cookie有过期时间，LocalStorage没有
Cookie可以被后端获取和操作，LocalStorage仅前端使用

IndexDB和WebSQL

IndexDB和WebSQL都为前端存储，主要用来存储大量数据，IndexDB可以使用索引存储数据，WebSQL则是一个小型的关系型数据库，可以使用SQL操作，不推荐使用原生来操作，目前有一些第三方插件，现在使用还不太广泛
整理不易，感谢打赏~~~~~~~~
在这里插入图片描述