『壹』 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
『貳』 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 對象所有的項。
『叄』 解決vue nodejs中cros跨域cookie和session失效的問題
很多童鞋會發現vue請求api介面的時候多個地址沒法共享session，也就是session會丟失。我們知道session是基於cookie的，ajax請求沒法共享session主要是因為cookie跨域引起的。cookie跨域如何解決呢？
『肆』 vue 使用 cookie
vue-cookie
第一步：安裝vue-cookie
npm install vue-cookie --save
第二步：在 mian.js 引入和通過 Vue.use() 明確地安裝
在 main.js 中引入
/局粗/ require es5 方法
var Vue = require('vue')
Vue.use(require('vue-cookie')) // 掛在在全局了
// es6 方法
import Vue from 'Vue'
import VueCookie from 'vue-cookie'
Vue.use(VueCookie) // 掛在在全局了
組件中設置一個cookie
// 組件中直接使用 來設置cookie
this.$cookie.set('test', 'Hello world!', 1);
獲取一個cookie
// 組件中獲取方式
this.$cookie.get('test'); // return value
刪除一個cookie
// 刪除 cookie
this.$cookie.delete('test');
警告
$ cookie關鍵名稱不能設置為含型['expires'，'max-age'，談臘猜'path'，'domain'，'secure']