วิธีดูหรือแก้ไข localStorage

259

ฉันสร้างส่วนขยายของ Chrome และฉันใช้ localStorage สำหรับจัดเก็บข้อมูล

ฉันกำลังเข้าถึง localStorage ผ่าน "background_page"

ทำงานได้ดี แต่ฉันจะดูค่าด้วยตนเองได้อย่างไร ใน Firefox คุณสามารถใช้ Firebug

ใครมีข้อเสนอแนะ?

google-chrome local-storage

270

มันง่ายมาก เพียงไปที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์โดยกดF12จากนั้นไปที่แท็บแอปพลิเคชัน ในการจัดเก็บส่วนขยายเก็บข้อมูลท้องถิ่น หลังจากนั้นคุณจะเห็นที่เก็บข้อมูลภายในเบราว์เซอร์ทั้งหมดของคุณที่นั่น

— Giorgi Gzirishvili
แหล่งที่มา

33

ใน Chrome เวอร์ชัน 60 คุณไม่สามารถแก้ไขหรือเพิ่มรายการใหม่ได้คุณจะต้องทำผ่านคอนโซลและlocalStorage.setItem('key', 'value')

— Jim Aho

9

ใน Chrome เวอร์ชัน 65 คุณสามารถแก้ไขและเพิ่มรายการใหม่ได้ด้วยตนเอง ดับเบิลคลิกด้านล่างคู่คีย์ - ค่าสุดท้ายในรายการคีย์ - ค่าในแอปพลิเคชัน> ที่จัดเก็บในตัวเครื่องเพื่อเพิ่มค่าใหม่

— Rose Perrone

169

เพียงแค่เปิดเครื่องมือสำหรับนักพัฒนาF12โดยการกด

คลิกที่แท็บแอปพลิเคชัน (เดิมคือทรัพยากร) และคุณจะเห็นเนื้อหาของ localStorage คุณสามารถเพิ่ม / แก้ไข / ลบรายการคีย์ / ค่าได้ด้วยตนเอง

แท็บทรัพยากร localStorage

ใน OS X ปุ่มคือ: ⌥+ ⌘+i

ชุดค่าผสมอื่น: Ctrl+ Shift+i

แก้ไข: ใน Chrome 56 ดูเหมือนว่านี้:

ป้อนคำอธิบายรูปภาพที่นี่

— Simone
แหล่งที่มา

4

อ๋อลองแล้ว แต่ localStorage ว่างเปล่า อาจเป็นเพราะฉันโหลดส่วนขยายที่คลายการแพคข้อมูลหรือไม่

— Joe Doe

สิ่งนี้อาจช่วยคุณได้: stackoverflow.com/questions/3598669/…

— Simone

3

Simone ฉันรู้วิธีการตั้งค่าและอ่าน localStorage ด้วย JS แต่ฉันต้องแก้ไขด้วยตนเอง / ลบมันด้วย

— Joe Doe

ไม่จำเป็นต้องทำกับ JS มันเป็นไปได้ที่จะเพิ่ม / แก้ไข / ลบรายการจาก UI

— Simone

17

ฉันใช้ chrome รุ่น 52.0.2743.82 m ใน Chrome รุ่นล่าสุดล่าสุด ณ ตอนนี้คุณสามารถดูค่าที่จัดเก็บในตัวเครื่องโดยเปิดตัว "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" จากนั้นดูที่แท็บ "แอปพลิเคชัน"

— Luke P. Issac
แหล่งที่มา

15

คุณสามารถไปที่ chrome: // chrome / extensions และจะมีลิงค์ไปยังหน้าพื้นหลังของคุณที่เมื่อคุณเปิดใช้งานคุณสามารถใช้เครื่องมือ Dev เพื่อดูเนื้อหา localStorage

— Ryan S.
แหล่งที่มา

ขอบคุณสำหรับคำตอบ @Ryan S แต่ localStorage ว่างเปล่าฉันตั้งไว้เช่นนี้localStorage['xy'] = JSON.stringify(xy);

— Joe Doe

2

ในคอนโซลโครเมี่ยมที่คุณสามารถทำได้localStorage.setItem('xy', JSON.stringify(xy))และจะตั้งค่ารายการใน localStorage

— Ryan S

2

ทำ chrome: // chrome-urls / จากนั้นที่เก็บข้อมูลในเครื่อง

— khaled_webdev

2

ฉันอาจไม่เข้าใจว่าคนที่นี่พยายามทำอะไรและไม่ใช่สิ่งที่ฉันทำและ / หรือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome มีการเปลี่ยนแปลงและแตกหักในเรื่องนี้

สคริปต์เนื้อหาของส่วนขยายของฉันจะจัดเก็บข้อมูลเช่นนี้:

chrome.storage.local.set(packet);

เมื่อฉันดูแท็บแอปพลิเคชันของหน้าพื้นหลังของส่วนขยายและขยายที่เก็บข้อมูล> ที่จัดเก็บในตัวเครื่องฉันเห็นส่วนขยายของฉันปรากฏอยู่ แต่การคลิกที่มันไม่มีข้อมูล

ทางออกเดียวที่ฉันพบคือการเรียกใช้ในคอนโซลหน้าพื้นหลัง:

chrome.storage.local.get(null, function(data) {console.log(data);})

คล้ายกับที่ส่วนขยายอ่าน (ยกเว้นการส่งค่า null เพื่อรับคีย์ทั้งหมดแทนที่จะเป็นชื่อคีย์เพื่อรับเฉพาะส่วนที่ฉันต้องการ) และใช้งานได้ดีมันแค่อึดอัดใจที่จะพิมพ์ออกทุกครั้ง นอกจากนี้ยังแปลกที่มีคำตอบเหล่านี้ทั้งหมดที่นี่ไม่ทำงานสำหรับฉัน

ฉันใช้ Chrome 73.0.3683.103 (บิวด์อย่างเป็นทางการ) (64 บิต) บน Windows 10 ส่วนขยายนั้นยังคงคลายการบีบอัดถ้ามันเกี่ยวข้อง แต่นั่นเป็นเวลาที่คุณต้องการทำเช่นนี้คือในการพัฒนา

— enigment
แหล่งที่มา