JavaScript front-end storage SessionStorage, LocalStorage, IndexDB, WebSQL, Cookies

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/suo082407128/article/details/95748045

SessionStorage

SessionStorage for the front-end storage, js operated by sessionStorage object scope for the current session is the current window, when the window is closed sessionStorage will be cleared, a new window inherited from the parent window sessionStorage the current page will be opened, but modify variables inherit a new window when, within the parent window variables do not change, the specific method:

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 through localStorage operation, localStorage same protocol, host, port under shared, no matter how many windows open, close and reopen are shared unless code or clear the cache, it would not clear the
localStorage API and sessionStorage as
in Example 1:
A window http://a.com.cn call at
localStorage.setItem("key","value")
call window B in http://a.com.cn/home.html

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

Example 2
invoked https://a.com.cn A window
localStorage.setItem("key","value")
in the window https://a.com.cn/home.html called B

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

SessionStorage LocalStorage and key are stored, value is a string value only

Cookie

Cookie is stored in the front-end, back-end operations can not be described herein Cookie operation, it is recommended to use a third-party plug-ins operate Cookie, Cookie time has expired

Cookies and LocalStorage
similarities: the same scope
differences:

Cookie time has expired, LocalStorage no
Cookie may be acquired and the rear end of the operation, LocalStorage only frontend

IndexDB and WebSQL

IndexDB and WebSQL are front-end storage, mainly used to store large amounts of data, IndexDB can use the index to store data, WebSQL is a small relational database, you can use SQL operation is not recommended to use the original operation was born, there are some third-party plug-ins , now it is not yet widely
finishing easy, thanks to a reward ~~~~~~
Here Insert Picture Description