cookie,sessionStorage,localStorage机制
介绍
一、Cookie操作
使用插件js-cookie:https://www.jianshu.com/p/6e1bacd35f59
原本cookie操作:https://blog.csdn.net/qq_29132907/article/details/80390792
一般使用
1. 存到Cookie去
// Create a cookie, valid across the entire site:
Cookies.set('name', 'value');
// Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 });
// Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });
2.在Cookie中取出
// Read cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
// Read all visible cookies:
Cookies.get(); // => { name: 'value' }
3.删除
// Delete cookie:
Cookies.remove('name');
// Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!
特殊使用
1、在cookie中存对象
跟一般使用不同的是,从Cookie中取出的时候,要从字符串转换成json格式:
const user = {
name: 'lia',
age: 18
}
Cookies.set('user', user)
const liaUser = JSON.parse(Cookies.get('user'))
二、localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
1、setItem存储value
用途:将value存储到key字段
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
2、getItem获取value
用途:获取指定key本地存储的值
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
3、removeItem删除key
用途:删除指定key本地存储的值
sessionStorage.removeItem("key");
localStorage.removeItem("site");
4、clear清除所有的key/value
用途:清除所有的key/value
sessionStorage.clear();
localStorage.clear();
5、removeItem删除key
用途:删除指定key本地存储的值
sessionStorage.removeItem("key");
localStorage.removeItem("site");
6、其他操作方法:点操作和[ ]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage; storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
7、 localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}