cookie,sessionStorage,localStorage机制

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); 
}

扩展阅读

  1. 基础入门:https://www.cnblogs.com/minigrasshopper/p/8064367.html
  2. 深入理解:https://www.cnblogs.com/andy-zhou/p/5360107.html
发布了41 篇原创文章 · 获赞 65 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/cindy647/article/details/101687881