『壹』 vue項目開發中什麼時候用cookie什麼時候用sessionstorage
一，cookie的使用
1，首先載入模塊
npm i js-cookie -S
2，在使用cookie的頁面上進行引入
import Cookies from 'js-cookie'
3，使用方法
創建一個在整個網站上有效的Cookie
Cookies.set('name', 'value');
創建一個從現在起7天後過期的cookie，在整個站點上有效：
Cookies.set('name', 'value', { expires: 7 });
創建一個過期的cookie，對當前頁面的路徑有效：
Cookies.set('name', 'value', { expires: 7, path: '' });
讀取cookie：
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
閱讀所有可見的Cookie：
Cookies.get(); // => { name: 'value' }
刪除cookie：
Cookies.remove('name');
刪除對當前頁面路徑有效的cookie：
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!
重要！刪除cookie時，您必須傳遞用於設置cookie的完全相同的路徑和域屬性，除非您依賴於默認屬性。
注意：刪除未存在的cookie不會引發任何異常，也不會返回任何值
二，localStorage的使用
註：vue下使用localStorage和H5使用localStorage的方法是一致的，不需要引入插件
1，儲存
//數據
localStorage.setItem('userName','HelloWeen');
2，獲取
localStorage.getItem('userName')
3，刪除
localStorage.removeItem('userName');
4，localStorage可以儲存JSON對象，且沒有時間限制的數據存儲 ，除非主動刪除。
//數組
var arr=[1,2,3];
localStorage.setItem("temp",arr); //會返回1,2,3
console.log(typeof localStorage.getItem("temp"));//string
console.log(localStorage.getItem("temp"));//1,2,3
5，localStorage.setItem() 不會自動將Json對象轉成字元串形式
var user= {"userName": "hello","age": 2};
typeof localStorage.getItem("user");//也會返回String
localStorage.setItem("user", user);//但是返回[object Object],
6，用localStorage.setItem()正確存儲JSON對象方法是：
存儲前先用JSON.stringify()方法將json對象轉換成字元串形式
JSON.stringify() 方法可以將任意的 JavaScript 值序列化成 JSON 字元串
1
2
3
1
2
3
4
5
1
1
1
2
1
2
3
1
1
1
2
1
1
1
1
1
獲取的時候要將之前存儲的JSON字元串使用JSON.parse()先轉成JSON對象再進行操作
var user= {"userName": "hello","age": 2};
user= JSON.stringify(user); //轉化為JSON字元串 "{"userName":"hello","age":2}"
localStorage.setItem("user", user);//返回{"userName":"hello","age":2}
user=JSON.parse(localStorage.getItem("user"));
三，sessionStorage的使用
定義和使用
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
sessionStorage 用於臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之後將會刪除這些數據。
提示: 如果你想在瀏覽器窗口關閉後還保留數據，可以使用 localStorage 屬性， 改數據對象沒有過期時間，今天、下周、明年都能用，除非你手動去刪除。
1，方法
sessionStorage.key(int index) //返回當前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。
1
1
2
3
4
sessionStorage.getItem(string key) //返回鍵名(key)對應的值(value)。若沒有返回null。
sessionStorage.setItem(string key, string value) //該方法接受一個鍵名(key)和值(value)作為參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。
sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 對象中移除。
sessionStorage.clear() //清除 sessionStorage 對象所有的項。
『貳』 緊急求助，為什麼js獲取不到cookie裡面的
這種方式只能獲取到 非httponly 的 cookie
『叄』 用js代碼 window.location.href 重定向後，如何通過瀏覽器返回定向之前的頁面
我寫個思路：獲取和設置cookie的方法網上很多我就不寫了
A:
varc=getCookie("xx");
if(c!=1){
setCookie("xx","1");
window.location.href="b.html";
}
B:
varf=document.referrer;//之前頁面專url
window.location.href=f;
其實你不是跳轉到B頁面，直接把屬當前頁面刷新一下就可以了。
location.reload()；
『肆』 vue前端cookie如何讀取到中文
在Vue2.0下，這個貌似已經不需要安裝了。因為當你創建一個項目的時候，npm install 已經為我們安裝好了。我的安裝方式如下：
?
1
2
3
4
5
6
7
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
這是我創建好的目錄結構，大家可以看一下：
項目結構
二、封裝Cookie方法
在util文件夾下，我們創建util.js文件，然後上代碼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//獲取cookie、
export function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//設置cookie,增加到vue實例方便全局調用
export function setCookie (c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};
//刪除cookie
『伍』 vuejs怎麼管理應用的登錄狀態
前後台交抄互其實都是通過servlet來實現襲的。 即servlet寫數據給前台，前台展示。前台提交數據，servlet處理。 框架只是封裝了servlet，提供了更加簡便，更加好維護的集成模式。如果你很感興趣框架的實現方式的話，你可以看看nutz的源代碼。