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操作,不推荐使用原生来操作,目前有一些第三方插件,现在使用还不太广泛

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

在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页