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

本文主要是介绍JavaScript前端存储SessionStorage、LocalStorage、IndexDB、WebSQL、Cookies，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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窗口http://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
相同点：作用范围相同
不同点：

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

IndexDB和WebSQL

IndexDB和WebSQL都为前端存储，主要用来存储大量数据，IndexDB可以使用索引存储数据，WebSQL则是一个小型的关系型数据库，可以使用SQL操作，不推荐使用原生来操作，目前有一些第三方插件，现在使用还不太广泛

整理不易，感谢赞赏~~~~~~~~

这篇关于JavaScript前端存储SessionStorage、LocalStorage、IndexDB、WebSQL、Cookies的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---