Storage In Javascript

Bài viết này mình sẽ giới thiệu về Storage trong JS , vậy Storage có nghĩa là gì , nói 1 cách đơn giản là nó là phần dữ liệu được lưu trữ ở browser , nghe đến đây thì có vẻ sẽ có rất nhiều người nhớ tới cookie, nhưng nó có điểm khác với cookie đó là việc nó có thể gửi được đi hay không . với thằng cookie thì CGI đang được sử dụng khá là nhiều , và từ bên server có thể tham chiếu đến nó . nhưng mà ngược lại thì storage thì bên server sẽ không thể tham chiếu đến nó, hay nói cách khác thì chỉ có từ phía của JS mới có thể tham chiếu đến storage được mà thôi . về cơ bản thì việc sử dụng khá là tiện lợi, và chúng ta nên sử dụng cho đúng hoàn cảnh giả sử khi mà chúng ta muốn gửi đến server thì nên sử dụng thằng cookie còn k thì chúng ta nên sử dụng thằng storage .

Các loại Storage

storage thì có 2 loại loại thứ nhất đó là localStorage và loại thứ 2 đó là sessionStorage localStorage và sessionStorage đều có cách lưu trữ cũng như là mục đích sử dụng khác nhau nhé

localStorage

localStorage là bộ nhớ được shared trong cùng 1 nguồn. bằng cách sử dụng localStorage thì chũng ta có thể lưu lại dữ liệu được sử dụng trên web mọi lúc, tuy nhiên thì user cũng có thể xóa dữ liệu đó nếu họ muốn.thêm nữa thì như đã trình bày ở trên thì chúng ta có thể yên tâm là các localStorage có nguồn khác cũng không thể nào tham chiếu đến được

sessionStorage

sessionStorage có một chút khác biệt đó là đối với mỗi một Browsing context thì sẽ được chia ra ở từng vùng khác nhau hay nói cách khác là ở mỗi một Browsing context khác nhau thì sẽ có sessionStorage khác nhau. vậy cái Browsing context có là cái gì ?

A browsing context is the environment in which a browser displays a Document (normally a tab nowadays, but possibly also a window or a frame within a page).

có thể hiểu đơn giản nó là 1 tab của browser .ở các tab khác nhau thì có sessionStorage khác nhau.ở trường hợp của thằng localStorage thì tất cả để đều được lưu ở chung 1 chỗ .nếu mà có 1 tab được lưu ở trong localStorage thì ngay lập tức các tab khác cũng có thể được sử dụng được phần data vừa lưu đó .

Tuy nhiên khi ta ở trong cùng 1 tab dẫu có chuyển trang mới thì sessionStorage vẫn được giữ nguyên.

chi tiết thì chúng ta hãy đi vào ví dụ cụ thể .

Thao tác với Storage

về cơ bản thì việc thao tác storage thì cả localStorage cũng như là sessionStorage không có gì thay đổi lắm . khi mà đưa giá trị vào trong properties của storage thì nó sẽ được giữ nguyên. Giá trị có thể lưu lại là string trong trường hợp muốn lưu là object thì sẽ chuyển nó về dạng json. ví dụ khi ta muốn lưu giá trị là "bar" vào trong vào properties có tên là "for" thì làm như sau

localStorage.foo="bar";

rất đơn giản , ta cũng có thể dùng method setItem để set giá trị cho nó đơn giản như sau

localStorage.setItem("foo","bar");

có setItem thì cũng có thằng getItem dùng method này để lấy ra giá trị của properties tên là "foo";

localStorage.getItem("foo");

hoặc là chúng ta tham chiếu đến properties để lấy ra giá trị đang được lưu trữ

console.log(localStorage.foo);

trên đây là phần lưu trữ cũng như truy xuất cơ bản trong storage. tiếp theo ta đến với removeItem từ tên method cũng đã hiểu là tác dụng của nó là gì đúng k

localStorage.removeItem("foo");

ngoài ra thì chúng ta còn có method clear() method này k có đối số nhé .

Thêm nữa thì có 1 properties là length dùng để biểu thị dữ liệu đang có bao nhiêu phần tử . như ở ví dụ trên thì ở "foo" đang chỉ có 1 value "bar" đang được lưu trữ và length đang là 1. thêm nữa thì Storage chúng tha hoàn toàn có thể lấy được giá trị thông qua Key và giá trị của key bắt đầu từ 0

var key = localStorage.key(0);
console.log(key);

ở trên là những thao tác cơ bản với thằng Storage.

Tiếp đến ta đi tiếp đến phần Storage event

bài toán đặt ra là như này giả sử dữ liệu trong thằng Storage này thay đổi vậy làm thế nào để ta có thế biết được thì chính từ đó thằng event ra đời . storage event thì nó khá là giống thằng popState,có nghĩa là ta sẽ bắt event phát sinh ra ở trên window, xem ví dụ sau window.addEventListener("storage", function(e)) {}, false); object event trong storage event hay nó gắn gọn là thằng storage event là 1 object mang các thuộc tính ( properties)

key // key được thay đổi
oldValue // giá trị cũ trước khi  thay đổi
newValue // giá trị mới được thay đổi
url       // đường dẫn page storage được thay đổi  
storageArea //nơi diễn ra thay đổi ( localStorage hoặc sessionStorage )

ở đây thì mình muốn chú ý 1 chút đến phần url thực ra thì nếu mà share cùng 1 Storage (vì sessionStorage không share tại nhiêu tab nên sẽ trở thành localStorage ) tại nhiều tab . nếu mà khi có thay đổi ở storage thì ở tất cả các tab đều có thể bắt được event đc phát sinh đó . Tuy nhiên thì khi mà thay đổi localStorage ở tab 1 cách có chủ ý ( can thiệp bằng tay) thì Storage Event sẽ không được phát sinh. sau đây thì mình sẽ giới thiệu sơ qua về cách dùng Đối với Storage thì bất cứ 1 thao tác nào mà xảy ra cũng làm thay đổi giá trị của key, oldValue,newValue nên là

về kiến thức quan trọng trong phần này chính là chúng ta cần biết khái niệm cũng như là phân biệt được các loại của Storage nên là khá dễ để phân biệt khi mà ta tham chiếu đến nó . chúng ta đi vào ví dụ sau .

var value=localStorage.sample;
if(!value){
  // khi value không có giá trị nào được đưa vào 
  value=1;
}else{
  value=parseInt(value)+1;
}
localStorage.sample=value;
disp(value);

// ánh xạ khi mà có sự thay đổi tại localStorage ở trang khác .
window.addEventListener("storage",function(e){
  if(e.key=="sample"){
    //sample đã được thay đổi
    disp(e.newValue);
  }
},false);

function disp(val){
  document.getElementById('result').textContent="ban đã tham chiếu đến lần thứ"+val;
}

qua ví dụ trên chúng ta đã hiểu và nắm được 1 phần nào về storage event rồi đúng k .

nguồn : http://uhyohyo.net/javascript/14_1.html