Hướng dẫn javascript save data to server - javascript lưu dữ liệu vào máy chủ

const todos = ['play piano', 'write some code', 'swim'];

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

window.addEventListener('DOMContentLoaded', () =>{
        //show todos
    todos.forEach( todo => {
        let li = document.createElement('li');
        li.textContent =  todo;
        todosUl.appendChild(li);
        //delete todos
        li.addEventListener('dblclick', () => {
            todosUl.removeChild(li);
        })
    })

    const addTodos = e => {
    e.preventDefault();

    let li = document.createElement('li');
    li.textContent =  input.value;
    todos.push(input.value);
    todosUl.appendChild(li);
    input.value = '';
}
saveBtn.addEventListener('click', addTodos);
})

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

Đây là cách cơ bản nhất để lưu trữ dữ liệu bằng JavaScript. Tất cả những gì chúng tôi làm là tạo một biến để giữ dữ liệu. Ví dụ: chúng ta có thể tạo một mảng

Chúng tôi chạy mã bên trong đối tượng cửa sổ với

const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');

5 để đảm bảo

5 có sẵn để được hiển thị khi tải trang.

Chúng tôi lặp qua

Nhược điểm

Chúng ta có thể thêm nhiều

5 vào mảng tĩnh, nhưng chúng biến mất trên trang làm mới. Đó là lý do tại sao chúng tôi cần các cách khác để lưu trữ

5.

2. LocalStorage

JavaScript cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt bằng API lưu trữ cục bộ. Tại đây, bạn có thể sử dụng

const todos = ['play piano', 'write some code', 'swim'];

3 và

const todos = ['play piano', 'write some code', 'swim'];

4. Các đối tượng cho phép chúng tôi lưu trữ dữ liệu (trong các cặp khóa/giá trị) và cập nhật nó từ lưu trữ của trình duyệt. Để xem dữ liệu, hãy mở trình duyệt của bạn. Kích chuột phải. Nhấp vào Kiểm tra => Ứng dụng => Lưu trữ.

localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

Đây là cách cơ bản nhất để lưu trữ dữ liệu bằng JavaScript. Tất cả những gì chúng tôi làm là tạo một biến để giữ dữ liệu. Ví dụ: chúng ta có thể tạo một mảng

5 như

localStorage.getItem('store_name');

//e.g
localStorage.getItem('name'); //Ahmed
//or 
localStorage // all stores

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

localStorage.clear();

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

0

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

Đây là cách cơ bản nhất để lưu trữ dữ liệu bằng JavaScript. Tất cả những gì chúng tôi làm là tạo một biến để giữ dữ liệu. Ví dụ: chúng ta có thể tạo một mảng

5 như

1

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

2

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

3

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

4

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

Đây là cách cơ bản nhất để lưu trữ dữ liệu bằng JavaScript. Tất cả những gì chúng tôi làm là tạo một biến để giữ dữ liệu. Ví dụ: chúng ta có thể tạo một mảng

5 như

Chúng tôi chạy mã bên trong đối tượng cửa sổ với const todosUl = document.querySelector('.todos'); const input = document.querySelector('#add'); const saveBtn = document.querySelector('#save'); 5 để đảm bảo

Chúng tôi lặp qua

5, tạo một phần tử

const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');

8 và hiển thị từng việc cần làm trên trang. Chúng ta có thể thêm

5 mới vào mảng bằng hàm

const todos = ['play piano', 'write some code', 'swim'];

0.

Nhược điểm

Chúng ta có thể thêm nhiều

5 vào mảng tĩnh, nhưng chúng biến mất trên trang làm mới. Đó là lý do tại sao chúng tôi cần các cách khác để lưu trữ

5.

2. LocalStorage

JavaScript cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt bằng API lưu trữ cục bộ. Tại đây, bạn có thể sử dụng

const todos = ['play piano', 'write some code', 'swim'];

3 và

const todos = ['play piano', 'write some code', 'swim'];

4. Các đối tượng cho phép chúng tôi lưu trữ dữ liệu (trong các cặp khóa/giá trị) và cập nhật nó từ lưu trữ của trình duyệt. Để xem dữ liệu, hãy mở trình duyệt của bạn. Kích chuột phải. Nhấp vào Kiểm tra => Ứng dụng => Lưu trữ.

Cả hai cách có cùng một cấu trúc. Sự khác biệt chính là

const todos = ['play piano', 'write some code', 'swim'];

3 cho phép chúng tôi lưu trữ dữ liệu miễn là chúng tôi muốn. Ngược lại,

const todos = ['play piano', 'write some code', 'swim'];

4 mất dữ liệu khi chúng tôi đóng cửa sổ hiện tại.

1 hoạt động giống như cơ sở dữ liệu NoQuery, chẳng hạn như MongoDB.

Chúng tôi tạo một tên

localStorage.getItem('store_name');

//e.g
localStorage.getItem('name'); //Ahmed
//or 
localStorage // all stores

4. Thêm đối tượng

localStorage.getItem('store_name');

//e.g
localStorage.getItem('name'); //Ahmed
//or 
localStorage // all stores

5. Các cửa hàng đối tượng giống như các bảng trong MySQL hoặc các mô hình trong MongoDB.

Cấu trúc của các cửa hàng đến từ

localStorage.getItem('store_name');

//e.g
localStorage.getItem('name'); //Ahmed
//or 
localStorage // all stores

6. Trong MongoDB, chúng tôi sẽ gọi chúng là

localStorage.getItem('store_name');

//e.g
localStorage.getItem('name'); //Ahmed
//or 
localStorage // all stores

7.

Cơ sở dữ liệu (đối tượng) có một phương thức gọi là

localStorage.getItem('store_name');

//e.g
localStorage.getItem('name'); //Ahmed
//or 
localStorage // all stores

8 cho phép chúng tôi thực hiện CRUD trong

1. Trong quá trình này, chúng tôi sử dụng

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

0 để lặp qua các bản ghi trong lưu trữ đối tượng.

Để đơn giản hóa cơ sở dữ liệu phức tạp (dường như), chúng tôi sẽ tạo bốn chức năng như sau

// ConnectIdB ()

// addTodos ()

// gettodos ()

// Deletetodos ()

Đầu tiên, chúng tôi tạo một thể hiện toàn cầu của cơ sở dữ liệu vì chúng tôi sẽ sử dụng nó ở một vài nơi trong các chức năng sau.

5

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tiếp theo, chúng tôi kết nối với

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1 bằng hàm

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

2.

6

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tiếp theo, chúng tôi kết nối với

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1 bằng hàm

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

2.

Hãy mở phiên bản 1 của cơ sở dữ liệu

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

3 bằng phương pháp

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

4.

Ở đây, chúng tôi nói về các phiên bản vì chúng tôi có thể nâng cấp cơ sở dữ liệu nếu chúng tôi thay đổi cấu trúc của nó. Tiếp theo, chúng tôi chạy ba sự kiện trên thể hiện cơ sở dữ liệu.

Đầu tiên, chúng tôi kiểm tra xem cơ sở dữ liệu mở có tồn tại hay tạo nó bằng sự kiện

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

5 không. Hoặc nếu chúng ta cố gắng mở cơ sở dữ liệu với phiên bản cao hơn phiên bản hiện có. Chúng tôi tạo tên của cửa hàng. Chúng tôi đã gọi nó là

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

6. Bạn có thể gọi nó là bất cứ thứ gì bạn muốn.

Tiếp theo, chúng tôi xác định một đối tượng có bàn phím và

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

7. Ở đây,

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

8 chứa ID duy nhất cho mỗi bản ghi trong cơ sở dữ liệu. Chúng tôi đang sử dụng

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

7 để cho

1 tự động tăng nó. Sau đó, chúng tôi nói

1 Dữ liệu thực tế (tên) mỗi bản ghi phải chứa.

Chúng tôi muốn lưu trữ nội dung (từ biểu mẫu), vì chúng tôi sẽ xác định khi lưu dữ liệu biểu mẫu thực tế. Dữ liệu không phải là duy nhất vì chúng tôi có thể cho phép cơ sở dữ liệu lưu một bản ghi khác có cùng tên.

Thứ hai, nếu có lỗi khi chúng tôi cố gắng mở cơ sở dữ liệu, chúng tôi sẽ chạy sự kiện lỗi và ghi lại lỗi trên bảng điều khiển. Cuối cùng, khi thành công, chúng tôi lưu trữ thuộc tính kết quả của cơ sở dữ liệu trong biến

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1. Sau đó, chúng ta có thể hiển thị kết quả bằng hàm

localStorage.clear();

3.

//addTodos()

Trước khi nhận được

5, chúng ta hãy tạo chúng từ biểu mẫu và lưu chúng.

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tiếp theo, chúng tôi kết nối với

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1 bằng hàm

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

2.

Hãy mở phiên bản 1 của cơ sở dữ liệu

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

3 bằng phương pháp

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

4.

Ở đây, chúng tôi nói về các phiên bản vì chúng tôi có thể nâng cấp cơ sở dữ liệu nếu chúng tôi thay đổi cấu trúc của nó. Tiếp theo, chúng tôi chạy ba sự kiện trên thể hiện cơ sở dữ liệu.completed in the database, we can read the data.

Đầu tiên, chúng tôi kiểm tra xem cơ sở dữ liệu mở có tồn tại hay tạo nó bằng sự kiện

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

5 không. Hoặc nếu chúng ta cố gắng mở cơ sở dữ liệu với phiên bản cao hơn phiên bản hiện có. Chúng tôi tạo tên của cửa hàng. Chúng tôi đã gọi nó là

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

6. Bạn có thể gọi nó là bất cứ thứ gì bạn muốn.

//getTodos()

Tiếp theo, chúng tôi xác định một đối tượng có bàn phím và

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

7. Ở đây,

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

8 chứa ID duy nhất cho mỗi bản ghi trong cơ sở dữ liệu. Chúng tôi đang sử dụng

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

7 để cho

1 tự động tăng nó. Sau đó, chúng tôi nói

1 Dữ liệu thực tế (tên) mỗi bản ghi phải chứa.

Chúng tôi muốn lưu trữ nội dung (từ biểu mẫu), vì chúng tôi sẽ xác định khi lưu dữ liệu biểu mẫu thực tế. Dữ liệu không phải là duy nhất vì chúng tôi có thể cho phép cơ sở dữ liệu lưu một bản ghi khác có cùng tên.

Thứ hai, nếu có lỗi khi chúng tôi cố gắng mở cơ sở dữ liệu, chúng tôi sẽ chạy sự kiện lỗi và ghi lại lỗi trên bảng điều khiển. Cuối cùng, khi thành công, chúng tôi lưu trữ thuộc tính kết quả của cơ sở dữ liệu trong biến

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1. Sau đó, chúng ta có thể hiển thị kết quả bằng hàm

localStorage.clear();

3.

8

Nhập chế độ FullScreenen EXIT Mode FullScreen

//deleteTodos()

Tiếp theo, chúng tôi kết nối với

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1 bằng hàm

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

2.

9

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tiếp theo, chúng tôi kết nối với

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

1 bằng hàm

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

2.

Hãy mở phiên bản 1 của cơ sở dữ liệu

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

3 bằng phương pháp

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

4.

Ở đây, chúng tôi nói về các phiên bản vì chúng tôi có thể nâng cấp cơ sở dữ liệu nếu chúng tôi thay đổi cấu trúc của nó. Tiếp theo, chúng tôi chạy ba sự kiện trên thể hiện cơ sở dữ liệu.

Đầu tiên, chúng tôi kiểm tra xem cơ sở dữ liệu mở có tồn tại hay tạo nó bằng sự kiện

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

5 không. Hoặc nếu chúng ta cố gắng mở cơ sở dữ liệu với phiên bản cao hơn phiên bản hiện có. Chúng tôi tạo tên của cửa hàng. Chúng tôi đã gọi nó là

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

6. Bạn có thể gọi nó là bất cứ thứ gì bạn muốn.

Tiếp theo, chúng tôi xác định một đối tượng có bàn phím và

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

7. Ở đây,

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

8 chứa ID duy nhất cho mỗi bản ghi trong cơ sở dữ liệu. Chúng tôi đang sử dụng

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');

7 để cho

1 tự động tăng nó. Sau đó, chúng tôi nói

1 Dữ liệu thực tế (tên) mỗi bản ghi phải chứa.

Chúng tôi muốn lưu trữ nội dung (từ biểu mẫu), vì chúng tôi sẽ xác định khi lưu dữ liệu biểu mẫu thực tế. Dữ liệu không phải là duy nhất vì chúng tôi có thể cho phép cơ sở dữ liệu lưu một bản ghi khác có cùng tên.

Làm thế nào JavaScript lưu trữ dữ liệu trong máy chủ?

3 cách điển hình để lưu trữ dữ liệu bằng JavaScript..

Lưu trữ tĩnh ..

LocalStorage..

SessionStorage..

IndexedDB..

WebSQL..

Cookies..

API bộ đệm ..

Làm cách nào để lưu dữ liệu JavaScript?

Lưu trữ dữ liệu trong trình duyệt với JavaScript..

setItem (khóa, giá trị) Lưu trữ khóa/giá trị ..

getItem (khóa) nhận được giá trị theo khóa ..

RemoveItem (khóa) Xóa khóa và giá trị ..

Rõ ràng () Xóa mọi thứ khỏi lưu trữ ..

khóa (chỉ mục) Nhận khóa từ một vị trí nhất định ..

Chiều dài số lượng các mặt hàng được lưu trữ ..

Chúng ta có thể lưu trữ dữ liệu trong máy chủ web không?

Với lưu trữ web, các ứng dụng web có thể lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng.Trước HTML5, dữ liệu ứng dụng phải được lưu trữ trong cookie, bao gồm trong mọi yêu cầu của máy chủ.Lưu trữ web an toàn hơn và một lượng lớn dữ liệu có thể được lưu trữ cục bộ, mà không ảnh hưởng đến hiệu suất trang web.. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Làm thế nào để JavaScript lưu trữ dữ liệu trong bộ đệm trình duyệt?

Lưu trữ dữ liệu đơn giản - Lưu trữ web..

Đầu tiên, hãy chuyển đến mẫu trống lưu trữ web của chúng tôi trên GitHub (mở cái này trong một tab mới) ..

Mở bảng điều khiển JavaScript của các công cụ phát triển của trình duyệt của bạn ..

Tất cả dữ liệu lưu trữ web của bạn được chứa trong hai cấu trúc giống như đối tượng bên trong trình duyệt: sessionStorage và localStorage ..