欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】

 更新時間:2020年03月12日 13:11:48   作者:willingtolove  
這篇文章主要介紹了js實現(xiàn)操作cookie的常見方法,結(jié)合實例形式分析了js操作cookie創(chuàng)建、讀取、刪除相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下

本文實例講述了js實現(xiàn)操作cookie的常見方法。分享給大家供大家參考,具體如下:

js操作cookie,可以通過開源的插件實現(xiàn),方便快捷,兼容性好,同樣也可以自己寫;
此文主要介紹兩個常用的插件:
Js.cookie.jsjQuery.cookie.js

0、Js.cookie.js

js.cookie.js : 一個簡單,輕量級的JavaScript API,用于處理cookie;

下載地址:https://github.com/js-cookie/js-cookie/releases

優(yōu)點:

  • 適用于所有瀏覽器;
  • 接受任何字符;
  • 沒有依賴;
  • 支持ES模塊;
  • Unobtrusive JSON support;
  • Enable custom encoding/decoding;

0.1 基本用法

#創(chuàng)建Cookie:

創(chuàng)建一個cookie,整個站點可用;

Cookies.set('name', 'value');

創(chuàng)建一個cookie,有效期為4天,整個站點可用;

Cookies.set('name', 'value', { expires: 4 });

注意:
expires的單位默認(rèn)為“天”,那如何設(shè)置有效期小于1天呢?
解決方案如下:

//設(shè)置cookie有效期為15分鐘;
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
  expires: inFifteenMinutes
});

創(chuàng)建一個cookie,有效期為4天,且只在當(dāng)前頁面所在的路徑有效;

Cookies.set('name', 'value', { expires: 4, path: '' })

舉例解釋一下,
http://127.0.0.1/path1/test.html頁面中設(shè)置cookie,且cookie的path設(shè)為"",那么在 http://127.0.0.1/test.html 這個頁面中是獲取不到那個cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個頁面中是可以獲取到那個cookie的;

下面的兩種寫法,效果是一樣的,整個站點可用;

Cookies.set('name', 'value', { expires: 4 });
Cookies.set('name', 'value', { expires: 4, path: '/' });

#讀取Cookie:

讀取某個cookie:

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

讀取所有可見cookie:返回的是個json對象;

Cookies.get() // => { name: 'value' , name1: 'value1' }

#刪除Cookie:

刪除某個cookie:

Cookies.remove('name')

刪除當(dāng)前頁面所在路徑下某個有效的cookie:

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!

注意:在路徑path1下的頁面中設(shè)置了個cookie,路徑設(shè)為path1/path2

Cookies.set('name', 'value', { path: 'path1/path2' });

但在路徑path1/path2中的頁面中是無法刪除這個cookie的,只能到路徑path1下的頁面中去刪除:

Cookies.remove('name', { path: 'path1/path2' });

0.2 JSON支持

當(dāng)穿件cookie時,可以將Array或Object作為值;

Cookies.set('name', { foo: 'bar' });

讀取cookie值:

Cookies.get('name') // => '{"foo":"bar"}'
Cookies.get() // => { name: '{"foo":"bar"}' }
Cookies.getJSON('name') // => { foo: 'bar' }
Cookies.getJSON() // => { name: { foo: 'bar' } }

1、jQuery.cookie.js

Jquery.cookie.js - A simple, lightweight jQuery plugin for reading, writing and deleting cookies;
Jquery.cookie.js - 一個簡單,輕量的jquery插件,用于cookie的讀取、寫入和刪除操作;

下載地址:http://plugins.jquery.com/cookie/
Github地址:https://github.com/carhartl/jquery-cookie

注意:使用之前要引入jquery.js;

1.1 基本操作

#創(chuàng)建cookie:

創(chuàng)建一個cookie,當(dāng)前頁面路徑有效;

$.cookie('cookieName', 'cookieValue');

此處有,舉例解釋一下,
http://127.0.0.1/path1/test.html頁面中這樣設(shè)置cookie,$.cookie('cookieName', 'cookieValue'),那么在 http://127.0.0.1/test.html 這個頁面中是獲取不到那個cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個頁面中是可以獲取到那個cookie的;

創(chuàng)建一個cookie,全站點有效;

$.cookie('name', 'value', { path: '/' });

創(chuàng)建一個cookie,有效期為4天;

$.cookie('cookieName', 'cookieValue', { expires: 4 });

注意:
expires的單位默認(rèn)為“天”,那如何設(shè)置有效期小于1天呢?
解決方案如下:

//設(shè)置cookie有效期為15分鐘;
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName', 'cookieValue', { expires: inFifteenMinutes });

創(chuàng)建一個cookie,并設(shè)置cookie的有效路徑:

$.cookie('name', 'value', { expires: 4, path: '/website1' });

該cookie只在website1站點下有效;

#讀取cookie:

讀取某個cookie:

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

讀取所有有效的cookie:(json格式)

$.cookie(); // => { "name": "value","name1":"value1" }

#刪除cookie:

// 成功刪除返回true,失敗返回false;
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// 刪除時,必須使用創(chuàng)建時設(shè)置的屬性值(path,domain 等)
$.cookie('name', 'value', { path: '/' });
// 失敗
$.removeCookie('name'); // => false
// 成功
$.removeCookie('name', { path: '/' }); // => true

1.2 全局配置

#raw

cookie是否編碼;(using encodeURIComponent/decodeURIComponent)

$.cookie.raw = true;

#json

是否以json格式進行存儲和讀取;(Assumes JSON.stringify and JSON.parse)

$.cookie.json = true;

2、參考

https://github.com/js-cookie/js-cookie
https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • JS操作Cookies的小例子

    JS操作Cookies的小例子

    這篇文章介紹了JS操作Cookies的小例子,有需要的朋友可以參考一下
    2013-10-10
  • IE8提示Invalid procedure call or argument 異常的解決方法

    IE8提示Invalid procedure call or argument 異常的解決方法

    某臺機器上,訪問公司的好幾個產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進了下,情況最后簡化為
    2012-09-09
  • Layui多選只有最后一個值的解決方法

    Layui多選只有最后一個值的解決方法

    今天小編就為大家分享一篇Layui多選只有最后一個值的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 原生Js Canvas去除視頻綠幕背景的方法實現(xiàn)

    原生Js Canvas去除視頻綠幕背景的方法實現(xiàn)

    本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-09-09
  • javascript模擬地球旋轉(zhuǎn)效果代碼實例

    javascript模擬地球旋轉(zhuǎn)效果代碼實例

    javascript模擬地球旋轉(zhuǎn)效果,把一下代碼保存到HTML文件,打開就可以看到一個旋轉(zhuǎn)的地球。請使用Chrome、Opera或者火狐瀏覽器查看,IE8不支持
    2013-12-12
  • JS煙花背景效果實現(xiàn)方法

    JS煙花背景效果實現(xiàn)方法

    這篇文章主要介紹了JS煙花背景效果實現(xiàn)方法,實例分析了javascript操作dom元素實現(xiàn)煙花特效的技巧,需要的朋友可以參考下
    2015-03-03
  • OpenLayers3實現(xiàn)地圖顯示功能

    OpenLayers3實現(xiàn)地圖顯示功能

    這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)地圖顯示功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法示例

    JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法示例

    這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實例形式分析了JavaScript針對數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下
    2018-07-07
  • JS圖片定時翻滾效果實現(xiàn)方法

    JS圖片定時翻滾效果實現(xiàn)方法

    這篇文章主要介紹了JS圖片定時翻滾效果實現(xiàn)方法,涉及javascript結(jié)合時間函數(shù)實現(xiàn)頁面元素動態(tài)切換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • JS使用cookie實現(xiàn)只出現(xiàn)一次的廣告代碼效果

    JS使用cookie實現(xiàn)只出現(xiàn)一次的廣告代碼效果

    我們上網(wǎng)經(jīng)常會遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況,其實是運用了Cookie 存儲 web 頁面的用戶信息,Cookie 以名/值對形式存儲,當(dāng)瀏覽器從服務(wù)器上請求 web 頁面時, 屬于該頁面的 cookie 會被添加到該請求中
    2017-04-04

最新評論