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

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

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

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

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

0、Js.cookie.js

js.cookie.js : 一個(gè)簡單,輕量級(jí)的JavaScript API,用于處理cookie;

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

優(yōu)點(diǎn):

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

0.1 基本用法

#創(chuàng)建Cookie:

創(chuàng)建一個(gè)cookie,整個(gè)站點(diǎn)可用;

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

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

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)建一個(gè)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 這個(gè)頁面中是獲取不到那個(gè)cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個(gè)頁面中是可以獲取到那個(gè)cookie的;

下面的兩種寫法,效果是一樣的,整個(gè)站點(diǎn)可用;

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

#讀取Cookie:

讀取某個(gè)cookie:

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

讀取所有可見cookie:返回的是個(gè)json對(duì)象;

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

#刪除Cookie:

刪除某個(gè)cookie:

Cookies.remove('name')

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

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

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

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

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

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

0.2 JSON支持

當(dāng)穿件cookie時(shí),可以將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 - 一個(gè)簡單,輕量的jquery插件,用于cookie的讀取、寫入和刪除操作;

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

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

1.1 基本操作

#創(chuàng)建cookie:

創(chuàng)建一個(gè)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 這個(gè)頁面中是獲取不到那個(gè)cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個(gè)頁面中是可以獲取到那個(gè)cookie的;

創(chuàng)建一個(gè)cookie,全站點(diǎn)有效;

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

創(chuàng)建一個(gè)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)建一個(gè)cookie,并設(shè)置cookie的有效路徑:

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

該cookie只在website1站點(diǎn)下有效;

#讀取cookie:

讀取某個(gè)cookie:

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

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

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

#刪除cookie:

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

// 刪除時(shí),必須使用創(chuàng)建時(shí)設(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格式進(jìn)行存儲(chǔ)和讀?。唬ˋssumes 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動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

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

相關(guān)文章

  • JS操作Cookies的小例子

    JS操作Cookies的小例子

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

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

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

    Layui多選只有最后一個(gè)值的解決方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論