Cách xem hoặc chỉnh sửa localStorage

259

Tôi đã tạo tiện ích mở rộng Chrome và đang sử dụng localStorage để lưu trữ dữ liệu.

Tôi đang truy cập localStorage thông qua "background_page".

Nó hoạt động tốt nhưng làm thế nào tôi có thể tự xem các giá trị của nó? Trong Firefox, bạn có thể sử dụng Fireorms.

Bất cứ ai có bất kỳ đề nghị?

google-chrome local-storage

— Joe Doe
nguồn

270

Thật đơn giản. Chỉ cần truy cập các công cụ dành cho nhà phát triển bằng cách nhấn F12, sau đó chuyển đến tab Ứng dụng . Trong phần Lưu trữ mở rộng Lưu trữ cục bộ . Sau đó, bạn sẽ thấy tất cả bộ nhớ cục bộ của trình duyệt của bạn ở đó.

— Giorgi Gzirishvili
nguồn

33

Trong Chrome phiên bản 60, bạn không thể sửa đổi hoặc thêm các mục mới, bạn sẽ phải thực hiện điều đó thông qua bảng điều khiển vàlocalStorage.setItem('key', 'value')

— Jim Aho

9

Trong Chrome phiên bản 65, bạn có thể tự sửa đổi và thêm các mục mới. Nhấp đúp vào bên dưới cặp khóa-giá trị cuối cùng trong danh sách khóa-giá trị trong Ứng dụng> Bộ nhớ cục bộ để thêm giá trị mới.

— Rose Perrone

169

Chỉ cần mở Công cụ dành cho nhà phát triển bằng cách nhấn F12.

Bấm vào Ứng dụng (trước đây là Tài nguyên) và bạn sẽ thấy nội dung của localStorage. Từ đó bạn có thể thêm / chỉnh sửa / xóa các mục nhập khóa / giá trị theo cách thủ công.

tab tài nguyên localStorage

Trên OS X, các phím là: ⌥+ ⌘+i

Một sự kết hợp khác: Ctrl + Shift+i

EDIT: Trong Chrome 56, nó trông như thế này:

nhập mô tả hình ảnh ở đây

— Simone
nguồn

4

Yep đã thử điều đó nhưng localStorage trống rỗng. Có lẽ bởi vì tôi đã tải phần mở rộng chưa giải nén?

— Joe Doe

Điều này có thể giúp bạn: stackoverflow.com/questions/3598669/ Kiếm

— Simone

3

Simone, tôi biết cách thiết lập và đọc localStorage bằng JS, nhưng tôi cần chỉnh sửa / xóa thủ công

— Joe Doe

Không cần phải làm điều đó với JS, có thể thêm / chỉnh sửa / xóa các mục từ UI

— Simone

17

Tôi hiện đang sử dụng phiên bản chrome 52.0.2743.82 m. Trong phiên bản chrome mới nhất này tính đến thời điểm hiện tại, bạn có thể thấy các giá trị lưu trữ cục bộ bằng cách khởi chạy "Công cụ dành cho nhà phát triển" và sau đó xem xét tab "Ứng dụng".

— Luke P. Issac
nguồn

15

Bạn có thể truy cập chrome: // chrome / extend và sẽ có một liên kết đến trang nền của bạn mà một khi bạn khởi chạy, bạn có thể sử dụng Công cụ Dev để xem nội dung localStorage.

— Ryan S
nguồn

Cảm ơn câu trả lời @Ryan S nhưng localStorage trống tôi đặt nó như thế nàylocalStorage['xy'] = JSON.stringify(xy);

— Joe Doe

2

Trong bảng điều khiển chrome, bạn có thể thực hiện localStorage.setItem('xy', JSON.stringify(xy))và điều đó sẽ đặt mục trong localStorage

— Ryan S

2

làm chrome: // chrome-urls /, sau đó lưu trữ cục bộ

— khaled_webdev

2

Hoặc tôi không hiểu những gì mọi người ở đây đang cố gắng làm và đó không phải là những gì tôi đang làm và / hoặc các công cụ dành cho nhà phát triển Chrome đã thay đổi và bị hỏng về vấn đề này.

Tập lệnh nội dung của tiện ích mở rộng của tôi lưu trữ dữ liệu như thế này:

chrome.storage.local.set(packet);

Khi tôi xem tab Ứng dụng của trang nền của tiện ích mở rộng và mở rộng Lưu trữ> Lưu trữ cục bộ, tôi thấy tiện ích mở rộng của mình được liệt kê, nhưng nhấp vào nó sẽ không hiển thị dữ liệu.

Giải pháp duy nhất tôi tìm thấy là chạy nó trong bảng điều khiển của trang nền:

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

Điều đó tương tự như cách tiện ích mở rộng đọc nó (ngoại trừ chuyển null để lấy tất cả các khóa thay vì tên khóa để lấy đúng tên tôi muốn) và nó hoạt động tốt, thật khó để gõ nó mỗi lần. Thật kỳ lạ khi có tất cả những câu trả lời ở đây không phù hợp với tôi.

Tôi đang sử dụng Chrome 73.0.3683.103 (Bản dựng chính thức) (64 bit) trên Windows 10. Tiện ích mở rộng vẫn chưa được giải nén, nếu điều đó có liên quan, nhưng đó là thời điểm rất có thể bạn muốn làm điều này, tức là trong quá trình phát triển.

— bí ẩn
nguồn