基本概念
- cookie：主要用来保存登录信息，比如登录某个网站市场可以看到“记住密码”这就是通过cookie中存入一段辨别用户身份的数据来实现的
- sessionStorage：会话，是可以将一部分数据在当前的会话中保存下来，刷新页面数据依旧存在。但是页面关闭时，sessionStorage中的数据就会被清空。
- localStorage：是HTML5标准找那个新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，当时考虑到浏览器的兼容性，更通用的方案是flash，如今localStorage被大多数浏览器所支持。
localStorage中的键值对总是以字符串的形式存储。localStorage类似sessionStorage，但其区别在于：存储在localStorage的数据可以长期保留； - 补充：同源：协议相同/域名相同/端口相同
localStorage和sessionStorage都具有相同的操作方法，
setItem(key, value)方法：将value存储到key指定的字段。
getItem(key): 获取指定key所存储的value值
key(index)方法：返回列表中对应索引的key值
removeItem(key)方法：从Storage中删除一个对应的键值对。
clear()方法：移除所有的内容
length属性：返回key / value队列的长度
唯一不同的是：
-
localStorage 在本地存储的时间是没有限制的，只要你愿意，他可以永远的存储在你本地；
-
sessionStorage只有当用户关闭浏览器窗口之后，数据才会被删除；
增改
a.setItem(key,value) 推荐使用
localStorage.setItem("name","laowang");
localStorage.setItem("name","guojiabao");
sessionStorage.setItem("name","老王");
b. 点运算符
localStorage.pwd = 123456;
c.下标法
localStorage["gender"] = 'M';
读
a. getItem(key):获取指定key所存储的value值
console.log(localStorage.getItem("name"));
b.点
console.log(localStorage.pwd);
c.下标
console.log(localStorage["gender"]);
删
removeItem(key)方法：从Storage中删除一个对应的键值对。
localStorage.removeItem("name");
全删
localStorage.clear();
遍历
for(let i=0; i<localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}
//存储为JSON时
let stuInfor = {
"name": "guojiabao",
"age": 18,
"gender": 'M'
}
let str = JSON.stringify(stuInfor);
localStorage.setItem("data", str);
console.log(JSON.parse(localStorage.getItem('data')).name);
cookie 、 localStorage和sessionStorage的区别
共同点：都是保存在浏览器端、且同源的