Hỏi đáp

Local Storage Là Gì – Localstorage Và Sessionstorage – viettingame

Như chúng ta đã biết thì chúng ta mà thậm chí lưu trữ dữ liệu vào trung tâm dữ liệu qua những hệ quản trị trung tâm dữ liệu và ngoài ra chúng ta mà thậm chí lưu trữ dữ liệu trải qua cookie hoặc session. Nhưng ngày hôm nay mình sẽ reviews với mọi người 2 cách lưu trữ dữ liệu nữa này là localStorage và sessionStorage.

Đang xem: Local storage là gì

1, localStorage.

localStorage dịch ra tiếng việt thì nhiều chúng ta chắc cũng từng hiểu tương đối về tác dụng của nó rồi đúng không ạ? Ở phía trên localStorage là một phần được tích hợp sẵn vào trong trình duyệt giúp cho chúng ta mà thậm chí lưu trữ và truy vấndữ liệu vô thời hạn vào trong trình duyệtcủa người sử dụng (nó chỉ bị mất đi lúc người sử dụng clear trình duyệt). Chúng ta mà thậm chí lưu trữ dữ liệu tương đối to (khoảng 5Mb).

-Trước lúc sử dụng localstorage thì chúng ta cần lưu ý: localStorage chỉ hỗ trợ trên những trình duyệt sở hữu version như sau trở lên trên:

Browser Versions
Chorme >= 4.0
Internet Explorer / Edge >= 8.0
Firefox >= 3.5
Safari >= 4.0
Opera >= 11.5

-Và để kiểm tra xem trình duyệt sở hữu hỗ trợ localStorage hay là không thì chúng ta sử dụng typeof.

if (typeof(Storage) !== “undefined”) { //hỗ trợ} else { // ko hỗ trợ}Lưu ý: Vì như thế client hay sử dụng phiên bạn dạng cũ nên mọi người cứ thêm đoạn này vào cho chắc để tránh xẩy ra lỗi ko mong muốn.

Xem localStorage bằng trình duyệt

-Để xem localstorage bằng trình duyệt chúng ta vào website cần xem (ở phía trên mình ví dụ luôn luôn website a.viettingame.vn) và sau đó chúng ta ấn F12 (hoặc Ctrl + shift + i) sau đó tuân theo nhưhình sau:

*

Thêm mới một dữ liệu vào localStorage

-Để thêm mới một dữ liệu vào localStorage chúng ta sử dụng phương thức setItem() với cú pháp:

localStorage.setItem($key, $value);Trong số đó:

$key là tên khóa của dữ liệu cần thêm vào (tương tự như table trong CSDL).$value là giá trị của $key trên.

Lưu ý: Nếu như trong localStorage đã tồn tại key đó rồi thì nó sẽ nhận giá trị của lần set sau cuối.

VD: Thêm một localstorage sở hữu key là ‘javascript‘và giá trị là ‘học tại a.viettingame.vn‘.

if (typeof(Storage) !== “undefined”) { localStorage.setItem(“javascript”, “học tại a.viettingame.vn”);} else { alert(“Trình duyệt của người sử dụng ko hỗ trợ localStorage. Hãy tăng cấp trình duyệt để sử dụng!”);}Xem Kết Quả

Lấy một dữ liệu trong localStorage.

-Để lấy một dữ liệu trong localStorage chúng ta sử dụng phương thức getItem() với cú pháp như sau:

localStorage.getItem($key);Trong số đó: $key là tên key của localStorage mà những mình thích lấy ra.

VD: Mình muốn lấy giá trị của key mang tên là javascript (ở ví dụ trên).

if ( typeof(Storage) !== “undefined”) { var data = localStorage.getItem(“javascript”); alert(data);} else { alert(“Trình duyệt của người sử dụng đã quá cũ. Hãy tăng cấp trình duyệt ngay!”);}Xem Kết Quả

Lấy số lương localStorage đã sở hữu trong trình duyệt.

-Để lấy ra số lượng key đã sở hữu trong localStorage thì chúng ta sử dụng thuộc tính length với cú pháp sau:

localStorage.length;VD: Lấy ra số lượng localStorage mà mình đã lưu trữ vào trình duyệt của chúng ta.

Xem thêm: trò chơi Đua Xe Trực tuyến Hoàn Toàn Miễn Phí Cho Mọi Người Trên Game24H

if ( typeof(Storage) !== “undefined”) { var data = localStorage.length; alert(data);} else { alert(“Trình duyệt của người sử dụng đã quá cũ. Hãy tăng cấp trình duyệt ngay!”);}Xem Kết Quả

Xóa một item trong localStorage.

-Để xóa một item trong localStorage chúng ta sử dụng cú pháp:

localStorage.removeItem($key);Trong số đó: $key là key mà những mình thích xóa.

VD: Mình sẽ xóa item sở hữu key là javascript trong localStorage của người sử dụng.

if ( typeof(Storage) !== “undefined”) { localStorage.removeItem(“javascript”) alert(“Xóa Thành công”);} else { alert(“Trình duyệt của người sử dụng đã quá cũ. Hãy tăng cấp trình duyệt ngay!”);}Xem Kết Quả

Xóa toàn bộ item trong localStorage

-Để xóa toàn bộ item trong localStorage chúng ta sử dụng cú pháp sau:

localStorage.clear()VD: Mình xóa hết dữ liệu localStorage mà mình đã lưu trên trình duyệt của chúng ta.

if ( typeof(Storage) !== “undefined”) { localStorage.clear(); alert(“Xóa Thành công”);} else { alert(“Trình duyệt của người sử dụng đã quá cũ. Hãy tăng cấp trình duyệt ngay!”);}Xem Kết Quả

2, sessionStorage.

– Cũng tương tự localStorage thì sessionStorage cũng sử dụng để lưu trữ dữ liệu trên trình duyệtcủa khách truy vấn (client). Nhưng dữ liệu được lưu trữ vào sessionStorage sẽ bị mất đi lúc chúng ta đóng tab trình duyệt.

-Trước lúc sử dụng sessionStorage thì chúng ta cũngcần lưu ý: sessionStorage chỉ hỗ trợ trên những trình duyệt sở hữu version như sau trở lên trên:

Browser Versions
Chorme >= 5.0
Internet Explorer / Edge >= 8.0
Firefox >= 2
Safari >= 4.0
Opera >= 10.5

– Và vì như thế sessionStoragecũng nằm trong gói Storage nên chúng ta cũng mà thậm chí sử dụng lại đoạn code kiểm tra trình duyệt sở hữu hỗ trợ Storage hay là không ở phía trên. Ngoài ra thì sessionStoragecũng sở hữu cú pháp và cách sử dụn những thuộc tính, phương thức như localStorage.

VD:

if ( typeof(Storage) !== “undefined”) { //set sesionStorage sessionStorage.setItem(“a.viettingame.vn”,”Học lập trình trực tuyến”); //get sessionStorage sessionStorage.getItem(“a.viettingame.vn”); //lấy ra số lượng session đã lưu trữ sessionStorage.length; //xóa 1 item localStorage sessionStorage.removeItem(“a.viettingame.vn”); // xóa toàn bộ item trong sessionStorage} else { alert(“Trình duyệt của người sử dụng đã quá cũ. Hãy tăng cấp trình duyệt ngay!”);}

3, Ghi chú.

-Ngoài sử dụng gán và thêm dữ liệu cho localStorage vàsessionStorage như những cách ở trên, thì chúng ta trọn vẹn mà thậm chí set,get trực tiếp như sau:

//set dữ liệulocalStorage.tenkey = value;//get dữ liệulocalStorage.tenkey;VD: Thêm và lấy dữ liệu sở hữu key a.viettingame.vn trong localStorage.

if ( typeof(Storage) !== “undefined”) { localStorage.a.viettingame.vn = “học lập trình”; alert(localStorage.a.viettingame.vn);} else { alert(“Trình duyệt của người sử dụng đã quá cũ. Hãy tăng cấp trình duyệt ngay!”);}Lưu ý: So với sessionStorage cũng làm tương tự.

-Ngoài ra chúng ta cũng cần phải lưu ý những điều sau:

Vì như thế localStorage và sessionStorageđược lưu trữ trên trình duyệt của người sử dụng, nên những bạn phải xem xét nội dung lưu trữ sở hữu liên quan tới vấn đề bảo mật hay là không.Và cũng chính vì như thế localStorage và sessionStorage được lưu trữ trên trình duyệt nên việc sử dụng nó sẽ không còn tác động tới hiệu xuất của website nhưng nó sẽ làm nặng nề trình duyệt của người sử dụng (ko đáng kể).

4, Lời kết.

Xem thêm: Wikipedia: As Of / As From (Phrase) Definition And Synonyms, Wikipedia:As Of

-Như vậy mình đã reviews xong tới mọi người về localStorage và sessionStorage rồi. Hai modulesnày thường được sử dụng khá là nhiều trong những game HTML5….

Về Viettingame.com

Viettingame.com - Chuyên trang web tổng hợp những thông tin hữu ích trên internet như thông tin về game, tin tổng hợp
Xem tất cả các bài viết của Viettingame.com →

Trả lời

Email của bạn sẽ không được hiển thị công khai.