js cookie
v3.0.5
JavaScript API JavaScript ที่เรียบง่ายสำหรับการจัดการคุกกี้
หากคุณกำลังดูสิ่งนี้ที่ https://github.com/js-cookie/js-cookie คุณกำลังอ่านเอกสารสำหรับสาขาหลัก ดูเอกสารสำหรับรุ่นล่าสุด -
คุกกี้ JavaScript รองรับ NPM ภายใต้ชื่อ js-cookie
npm i js-cookie แพ็คเกจ NPM มีฟิลด์ module ที่ชี้ไปที่ตัวแปรโมดูล ES ของไลบรารีส่วนใหญ่เพื่อให้การสนับสนุนโมดูล ES Aware Bundlers ในขณะที่สนาม browser ชี้ไปที่โมดูล UMD สำหรับความเข้ากันได้แบบย้อนหลังเต็มรูปแบบ
เบราว์เซอร์ทั้งหมดไม่รองรับโมดูล ES โดยธรรมชาติ ด้วยเหตุนี้แพ็คเกจ/รีลีส NPM จึงมีทั้งตัวแปรโมดูล ES และ UMD และคุณอาจต้องการรวมโมดูล ES พร้อมกับทางเลือก UMD ทางเลือกเพื่อบัญชีนี้:
อีกทางเลือกหนึ่งรวมถึง JS-Cookie ผ่าน JSDELIVR CDN
นำเข้าห้องสมุด:
import Cookies from 'js-cookie'
// or
const Cookies = require ( 'js-cookie' )สร้างคุกกี้ที่ถูกต้องทั่วทั้งไซต์:
Cookies . set ( 'name' , 'value' )สร้างคุกกี้ที่หมดอายุ 7 วันนับจากนี้ใช้งานได้ทั่วทั้งไซต์:
Cookies . set ( 'name' , 'value' , { expires : 7 } )สร้างคุกกี้ที่หมดอายุนั้นใช้ได้กับเส้นทางของหน้าปัจจุบัน:
Cookies . set ( 'name' , 'value' , { expires : 7 , path : '' } )อ่านคุกกี้:
Cookies . get ( 'name' ) // => 'value'
Cookies . get ( 'nothing' ) // => undefinedอ่านคุกกี้ที่มองเห็นได้ทั้งหมด:
Cookies . get ( ) // => { name: 'value' }หมายเหตุ: เป็นไปไม่ได้ที่จะอ่านคุกกี้โดยเฉพาะโดยผ่านคุณลักษณะหนึ่งในคุกกี้ (ซึ่งอาจใช้หรือไม่อาจใช้เมื่อเขียนคุกกี้ที่เป็นปัญหา):
Cookies . get ( 'foo' , { domain : 'sub.example.com' } ) // `domain` won't have any effect...! คุกกี้ที่มีชื่อ foo จะใช้ได้เฉพาะใน .get() หากมองเห็นได้จากที่เรียกว่ารหัส; แอตทริบิวต์โดเมนและ/หรือเส้นทางจะไม่มีผลเมื่ออ่าน
ลบคุกกี้:
Cookies . remove ( 'name' )ลบคุกกี้ที่ถูกต้องไปยังเส้นทางของหน้าปัจจุบัน:
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . remove ( 'name' ) // fail!
Cookies . remove ( 'name' , { path : '' } ) // removed! สำคัญ! เมื่อลบคุกกี้และคุณไม่ได้พึ่งพาแอตทริบิวต์เริ่มต้นคุณต้องผ่าน path เดียวกัน domain secure และ sameSite ที่ใช้ในการตั้งค่าคุกกี้:
Cookies . remove ( 'name' , { path : '' , domain : '.yourdomain.com' , secure : true } )หมายเหตุ: การลบคุกกี้ที่ไม่มีอยู่ไม่มีการยกข้อยกเว้นใด ๆ หรือส่งคืนค่าใด ๆ
หากมีอันตรายใด ๆ จากความขัดแย้งกับ Cookies เนมสเปซวิธี noConflict จะช่วยให้คุณกำหนดเนมสเปซใหม่และรักษาแบบดั้งเดิม สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อเรียกใช้สคริปต์บนไซต์บุคคลที่สามเช่นเป็นส่วนหนึ่งของวิดเจ็ตหรือ SDK
// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies . noConflict ( )
Cookies2 . set ( 'name' , 'value' ) หมายเหตุ: วิธี .noConflict ไม่จำเป็นเมื่อใช้ AMD หรือ CommonJS ดังนั้นจึงไม่ได้รับการเปิดเผยในสภาพแวดล้อมเหล่านั้น
โครงการนี้เป็นไปตามมาตรฐาน RFC 6265 ตัวละครพิเศษทั้งหมดที่ไม่ได้รับอนุญาตในคุกกี้ชื่อหรือค่าคุกกี้จะถูกเข้ารหัสด้วย UTF-8 Hex ของแต่ละคนเทียบเท่าโดยใช้การเข้ารหัสเปอร์เซ็นต์ ตัวละครตัวเดียวในคุกกี้ชื่อหรือค่าคุกกี้ที่ได้รับอนุญาตและยังคงเข้ารหัสเป็นตัวละครเปอร์เซ็นต์ % มันถูกหลบหนีเพื่อตีความเปอร์เซ็นต์อินพุตเป็นตัวอักษร โปรดทราบว่ากลยุทธ์การเข้ารหัส/การถอดรหัสเริ่มต้นนั้นหมายถึงการทำงานร่วมกันระหว่างคุกกี้ที่อ่าน/เขียนโดย JS-Cookie ในการแทนที่กลยุทธ์การเข้ารหัส/ถอดรหัสเริ่มต้นคุณต้องใช้ตัวแปลง
หมายเหตุ: ตาม RFC 6265 คุกกี้ของคุณอาจถูกลบหากมีขนาดใหญ่เกินไปหรือมีคุกกี้มากเกินไปในโดเมนเดียวกันรายละเอียดเพิ่มเติมที่นี่
สามารถตั้งค่าค่าเริ่มต้นของแอตทริบิวต์คุกกี้ทั่วโลกโดยการสร้างอินสแตนซ์ของ API ผ่านทาง withAttributes() หรือเป็นรายบุคคลสำหรับการโทรแต่ละครั้งไปยัง Cookies.set(...) โดยผ่านวัตถุธรรมดาเป็นอาร์กิวเมนต์สุดท้าย แอตทริบิวต์ต่อการโทรแทนที่แอตทริบิวต์เริ่มต้น
กำหนดเมื่อคุกกี้จะถูกลบออก ค่าจะต้องเป็น Number ที่จะตีความเป็นวันนับจากเวลาของการสร้างหรืออินสแตนซ์ Date หากละเว้นคุกกี้จะกลายเป็นคุกกี้เซสชัน
ในการสร้างคุกกี้ที่หมดอายุในเวลาน้อยกว่าหนึ่งวันคุณสามารถตรวจสอบคำถามที่พบบ่อยบนวิกิ
ค่าเริ่มต้น: คุกกี้จะถูกลบออกเมื่อผู้ใช้ปิดเบราว์เซอร์
ตัวอย่าง:
Cookies . set ( 'name' , 'value' , { expires : 365 } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' ) String ที่ระบุเส้นทางที่มองเห็นคุกกี้
ค่าเริ่มต้น: /
ตัวอย่าง:
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' , { path : '' } )หมายเหตุเกี่ยวกับ Internet Explorer:
เนื่องจากข้อผิดพลาดที่คลุมเครือในการใช้งาน WinInet InternetGetCookie พื้นฐานของเอกสาร IE Cookie จะไม่คืนคุกกี้หากมันถูกตั้งค่าด้วยแอตทริบิวต์เส้นทางที่มีชื่อไฟล์
(จาก Internet Explorer Cookie Internals (FAQ))
ซึ่งหมายความว่าเราไม่สามารถตั้งค่าเส้นทางโดยใช้ window.location.pathname ในกรณีที่ชื่อพา ธ ดังกล่าวมีชื่อไฟล์เช่นนั้น: /check.html (หรืออย่างน้อยก็ไม่สามารถอ่านคุกกี้ได้อย่างถูกต้อง)
ในความเป็นจริงคุณไม่ควรอนุญาตให้อินพุตที่ไม่น่าเชื่อถือตั้งค่าแอตทริบิวต์คุกกี้หรือคุณอาจสัมผัสกับการโจมตี XSS
String ที่ระบุโดเมนที่ถูกต้องซึ่งควรมองเห็นคุกกี้ คุกกี้จะมองเห็นโดเมนย่อยทั้งหมดได้
ค่าเริ่มต้น: คุกกี้สามารถมองเห็นได้เฉพาะโดเมนหรือโดเมนย่อยของหน้าเว็บที่สร้างคุกกี้ยกเว้น Internet Explorer (ดูด้านล่าง)
ตัวอย่าง:
สมมติว่าคุกกี้ที่ถูกสร้างขึ้นบน site.com :
Cookies . set ( 'name' , 'value' , { domain : 'subdomain.site.com' } )
Cookies . get ( 'name' ) // => undefined (need to read at 'subdomain.site.com')หมายเหตุเกี่ยวกับพฤติกรรมเริ่มต้นของ Internet Explorer:
Q3: ถ้าฉันไม่ระบุแอตทริบิวต์โดเมน (สำหรับ) คุกกี้เช่นส่งไปยังโดเมนย่อยที่ซ้อนกันทั้งหมดหรือไม่? ตอบ: ใช่คุกกี้ที่ตั้งค่าไว้ใน example.com จะถูกส่งไปที่ Sub2.sub1.example.com Internet Explorer แตกต่างจากเบราว์เซอร์อื่น ๆ ในเรื่องนี้
(จาก Internet Explorer Cookie Internals (FAQ))
ซึ่งหมายความว่าถ้าคุณละเว้นแอตทริบิวต์ domain มันจะมองเห็นได้สำหรับโดเมนย่อยใน IE
ไม่ว่าจะ true หรือ false แสดงว่าการส่งคุกกี้ต้องใช้โปรโตคอลที่ปลอดภัย (HTTPS)
ค่าเริ่มต้น: ไม่มีข้อกำหนดโปรโตคอลที่ปลอดภัย
ตัวอย่าง:
Cookies . set ( 'name' , 'value' , { secure : true } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' ) String ที่อนุญาตให้ควบคุมว่าเบราว์เซอร์กำลังส่งคุกกี้พร้อมกับคำขอข้ามไซต์หรือไม่
ค่าเริ่มต้น: ไม่ได้ตั้งค่า
โปรดทราบว่าเบราว์เซอร์ล่าสุดกำลังทำ "หละหลวม" ค่าเริ่มต้นแม้จะไม่ระบุอะไรเลยที่นี่
ตัวอย่าง:
Cookies . set ( 'name' , 'value' , { sameSite : 'strict' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' ) const api = Cookies . withAttributes ( { path : '/' , domain : '.example.com' } ) สร้างอินสแตนซ์ใหม่ของ API ที่แทนที่การใช้งานการถอดรหัสเริ่มต้น ทั้งหมดได้รับวิธีการที่พึ่งพาการถอดรหัสที่เหมาะสมในการทำงานเช่น Cookies.get() และ Cookies.get('name') จะเรียกใช้ตัวแปลงที่กำหนดสำหรับแต่ละคุกกี้ ค่าที่ส่งคืนจะถูกใช้เป็นค่าคุกกี้
ตัวอย่างจากการอ่านหนึ่งในคุกกี้ที่สามารถถอดรหัสได้โดยใช้ฟังก์ชั่น escape :
document . cookie = 'escaped=%u5317'
document . cookie = 'default=%E5%8C%97'
var cookies = Cookies . withConverter ( {
read : function ( value , name ) {
if ( name === 'escaped' ) {
return unescape ( value )
}
// Fall back to default for all other cookies
return Cookies . converter . read ( value , name )
}
} )
cookies . get ( 'escaped' ) // 北
cookies . get ( 'default' ) // 北
cookies . get ( ) // { escaped: '北', default: '北' }สร้างอินสแตนซ์ใหม่ของ API ที่แทนที่การใช้งานการเข้ารหัสเริ่มต้น:
Cookies . withConverter ( {
write : function ( value , name ) {
return value . toUpperCase ( )
}
} ) npm i @types/js-cookieตรวจสอบเอกสารเซิร์ฟเวอร์
ตรวจสอบแนวทางที่มีส่วนร่วม
การปล่อยควรทำผ่านเวิร์กโฟลว์ Release GitHub Actions เพื่อให้แพคเกจที่เผยแพร่ใน NPMJS.com มีแพ็คเกจที่มา
GitHub เผยแพร่ถูกสร้างขึ้นเป็นร่างและจำเป็นต้องเผยแพร่ด้วยตนเอง! (นี่คือดังนั้นเราจึงสามารถสร้างบันทึกย่อการเปิดตัวที่เหมาะสมก่อนเผยแพร่)
ขอบคุณมากสำหรับ BrowserStack ที่ให้การทดสอบเบราว์เซอร์ไม่ จำกัด โดยไม่ต้องเสียค่าใช้จ่าย
