Hướng dẫn store data on server javascript - lưu trữ dữ liệu trên máy chủ javascript

Đối với một tập lệnh log-log-lover rất đơn giản:

Hình thức của bạn:

Add to log

Message:

Sau đó lưu vào log.phpsave-to-log.php

Nếu đó là máy chủ Unix, bạn sẽ cần thêm 755 quyền vào thư mục của nhật ký để PHP có quyền truy cập để ghi vào nó. Ngoài ra, bạn sẽ có một biểu mẫu tiếp tục nối thêm thông tin cho

0.

Follow-Up

Nếu bạn không nhất thiết cần lưu trữ nó trên máy chủ (bạn đã đề cập đến email), bạn có thể sử dụng các mục sau đó làm tập lệnh PHP:

Hướng dẫn store data on server javascript - lưu trữ dữ liệu trên máy chủ javascript

Steve Alila

Đăng vào ngày 23 tháng 6 năm 2021 • Cập nhật vào ngày 27 tháng 9 năm 2021

Lưu trữ nút của bạn. Dữ liệu cấu hình của ứng dụng JS khá đơn giản - mọi đối tượng trong JavaScript có thể dễ dàng được hiển thị dưới dạng JSON, do đó chỉ là dữ liệu chuỗi có thể được gửi hoặc lưu theo bất kỳ cách nào bạn muốn. Cách đơn giản nhất để làm điều này liên quan đến json.parse () và json tích hợp.

Bạn có thể đã làm việc với cơ sở dữ liệu SQL như MySQL. Bạn đã tạo Frontend của trang web của mình, sau đó sử dụng ngôn ngữ lập trình để viết mã phụ trợ.

Bạn cũng có thể sử dụng JavaScript (Node.js.) để tạo một máy chủ để tương tác với cơ sở dữ liệu như PostgreSQL hoặc MongoDB.

Các thiết lập trên có thể dài và mệt mỏi cho một dự án đơn giản.

  1. Giải pháp là lưu trữ dữ liệu trên máy khách, đọc, cập nhật và xóa nó bằng JavaScript thông qua:
  2. Lưu trữ tĩnh
  3. Lưu trữ cục bộ
  4. Phiên điều hành
  5. Lập chỉ mụcDB
  6. WebSQL
  7. Bánh quy

API bộ đệm

  1. Giải pháp là lưu trữ dữ liệu trên máy khách, đọc, cập nhật và xóa nó bằng JavaScript thông qua:
  2. Lưu trữ tĩnh
  3. Lưu trữ cục bộ

Phiên điều hành

Lập chỉ mụcDB

WebSQL

  1. Bánh quy
  2. API bộ đệm

Trong hướng dẫn này, chúng tôi sẽ khám phá ba cách điển hình để lưu trữ dữ liệu bằng JavaScript. Đó là:

Lưu trữ cục bộ

Sử dụng cơ sở dữ liệu trình duyệt

Chúng tôi sẽ tìm hiểu các đặc điểm của mỗi bộ lưu trữ, cách thức hoạt động và những nhược điểm của nó. Để nắm bắt các khái niệm, chúng tôi sẽ tạo một ứng dụng đơn giản.

Chúng tôi sẽ không sử dụng bất kỳ khung hoặc thư viện nào. Thay vào đó, chúng tôi sẽ tương tác với API DOM, API lưu trữ web và API

1.

Sơ bộ

Bạn nên hiểu ES6 JavaScript vì chúng tôi sẽ viết mã bằng cú pháp ES6.

Nhận mã ứng dụng

2 hoàn chỉnh trên GitHub: https://github.com/alilasteve/todo

HTML

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

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ư

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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.

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

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

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.

Làm thế nào nó hoạt động

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

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.

localStorage.getItem('store_name');

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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.

localStorage.removeItem('store_name');

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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.

localStorage.clear();

Nhập chế độ FullScreenen EXIT Mode FullScreen

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.

0

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

1

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

2. LocalStorage

3

Nhập chế độ FullScreenen EXIT Mode FullScreen

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ữ.

4

Nhập chế độ FullScreenen EXIT Mode FullScreen

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.

Làm thế nào nó hoạt động

Để lưu trữ dữ liệu, sử dụng hai tham số như được hiển thị.

Để kiểm tra mã, hãy xóa bảng điều khiển (Ctrl + L) và dán mã trên với bất kỳ tên cửa hàng nào bạn thích.

Bạn có thể truy xuất dữ liệu được lưu trữ bằng cách sử dụng const todos = ['play piano', 'write some code', 'swim']; 7 như được hiển thị:

Bạn có thể xóa đối tượng lưu trữ

Hoặc xóa tất cả các đối tượng lưu trữ bằng cách sử dụng

const todos = ['play piano', 'write some code', 'swim'];
8 lưu trữ dữ liệu trong chuỗi. Trong ứng dụng TODO của chúng tôi, chúng tôi sử dụng nó như sau:

Trước tiên, chúng tôi tạo một biến,

const todos = ['play piano', 'write some code', 'swim'];
9 Tiếp theo, kiểm tra xem trình duyệt đã có một đối tượng lưu trữ có tên
const todos = ['play piano', 'write some code', 'swim'];
9 nếu nó không tồn tại, chúng tôi tạo một mảng trống. Nếu nó đã tồn tại, chúng ta có thể lấy nó sẵn sàng để được sử dụng trong các phần khác của mã.

Chúng tôi sử dụng

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);
})
1 để thay đổi
5 từ JSON sang chữ JavaScript thông thường. Sau đó, chúng tôi trả về đối tượng sẽ được sử dụng trong các phần khác của mã.

Tạo

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);
})
3, với tham số
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);
})
4. Chúng tôi đẩy dữ liệu mới trong lưu trữ web. Và tạo lại đối tượng
const todos = ['play piano', 'write some code', 'swim'];
8. Chúng tôi
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);
})
6
5 trước khi lưu nó vì
const todos = ['play piano', 'write some code', 'swim'];
8 lưu trữ dữ liệu theo chuỗi. Sau đó chúng tôi tiến hành và nhận giá trị đầu vào từ hàm
const todos = ['play piano', 'write some code', 'swim'];
0 trong dòng

như hình dưới đây:

Cuối cùng, chúng ta có thể xóa từng phần tử trong mảng

Ở đây, không sử dụng

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

0 nhưng sử dụng phương thức
localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

1 vì chúng tôi không chắc chắn thứ tự chúng tôi có thể quyết định xóa từng phần tử khỏi cửa hàng
5.

Chúng tôi tìm thấy chỉ số cụ thể của

const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');
8 mà chúng tôi muốn xóa khỏi
const todos = ['play piano', 'write some code', 'swim'];
8 bằng phương pháp
localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

5. Thêm mối nối nó từ mảng. Sau đó, tạo lại đối tượng
const todos = ['play piano', 'write some code', 'swim'];
8 sau khi sửa đổi.

Thuận lợi

Lần này, dữ liệu vẫn tồn tại ngay cả khi chúng tôi đóng và mở lại trình duyệt.

Bất lợi

Chúng tôi không thể lưu trữ các loại dữ liệu phức tạp bằng cách sử dụng

const todos = ['play piano', 'write some code', 'swim'];
8. Đó là nơi
localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

8 đến.

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

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.

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.

//addTodos()

7

Nhập chế độ FullScreenen EXIT Mode FullScreen

Đầu tiên, chúng tôi ngăn biểu mẫu từ hành vi mặc định của nó là làm mới trang cho mỗi lần gửi bằng

localStorage.clear();
5.

Tiếp theo, chúng tôi tạo một giao dịch

localStorage.clear();
6 trong cửa hàng
localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');
6 được tạo trước đây của chúng tôi. Tiếp theo, chúng tôi tạo một bản ghi tạo mới và lưu trữ nó trong cửa hàng.

Nếu yêu cầu thành công, chúng tôi xóa biểu mẫu sẵn sàng cho đầu vào hình thức sau. Khi giao dịch đã được hoàn thành trong cơ sở dữ liệu, chúng tôi có thể đọc dữ liệu.completed in the database, we can read the data.

Nếu chúng tôi không hoàn thành giao dịch, chúng tôi sẽ chạy một sự kiện lỗi và dừng thực hiện mã tiếp theo.

//getTodos()

Chúng tôi chạy một vòng lặp trong thời gian để loại bỏ

localStorage.clear();
8 hiện tại của
6 để tránh sao chép bản ghi. Tiếp theo, chúng tôi nhận được cửa hàng mục tiêu.

Sử dụng phương pháp

localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');
0 và sự kiện thành công, tạo
const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');
8 cho mỗi bản ghi bằng ID duy nhất mà chúng tôi đã lưu trước đó.

Từ đây, chúng ta có thể quyết định xóa danh sách bằng cách sử dụng hàm xóa gắn với mỗi

const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');
8. Hãy nhớ kết thúc
localStorage.removeItem('store_name');

//e.g
localStorage.removeItem('name');
0 với
04 để cho phép mã tiến hành đến việc tạo và xóa và xóa sau đây.

8

Nhập chế độ FullScreenen EXIT Mode FullScreen

//deleteTodos()

Giống như

localStorage.clear();
3, chúng tôi bắt đầu giao dịch
localStorage.clear();
6 trên cửa hàng đối tượng. Chuyển đổi từng ID của ____ 108 thành một số và tìm khớp của nó với số được lưu trữ trong cơ sở dữ liệu. Sau đó, xóa nó.

9

Nhập chế độ FullScreenen EXIT Mode FullScreen

Và Voila! Chúng tôi đã thực hiện một bản cập nhật đơn giản cho

1.

Hãy nhớ rằng, bạn có thể lưu trữ hình ảnh, video và hình ảnh trong

1 như bạn sẽ làm trong một môi trường phía máy chủ điển hình.

Bất lợi

Điểm yếu chính của

1 là nó có thể phức tạp để sử dụng.

Sự kết luận

Bài viết này nhằm mục đích cung cấp cho bạn một cái nhìn tổng quan về các cách bạn có thể sử dụng JavaScript để lưu trữ dữ liệu ở phía máy khách. Bạn có thể đọc thêm về từng phương pháp và áp dụng nó theo nhu cầu của bạ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 ..

Bạn có thể lưu trữ dữ liệu trên máy chủ không?

Một máy chủ lưu trữ, còn được gọi là máy chủ tệp, là một loại máy chủ được sử dụng để lưu trữ, bảo mật và quản lý dữ liệu và ứng dụng.Máy chủ này chủ yếu được xây dựng để lưu trữ và truy cập dữ liệu qua Internet hoặc qua mạng được chia sẻ.. This server is primarily built for storing and accessing data through the internet or over a shared network.

JavaScript có thể ghi tệp trên máy máy chủ không?

JS có thể được sử dụng để thực hiện điều này ở phía máy chủ.Nó có các phương pháp để đọc và ghi các tệp trên hệ thống tệp vừa đồng bộ và không đồng bộ.. It has methods for reading and writing files on the file system that are both synchronous and asynchronous.

Node JS lưu trữ dữ liệu trên máy chủ như thế nào?

Lưu trữ nút của bạn.Dữ liệu cấu hình của ứng dụng JS khá đơn giản - mọi đối tượng trong JavaScript có thể dễ dàng được hiển thị dưới dạng JSON, do đó chỉ là dữ liệu chuỗi có thể được gửi hoặc lưu theo bất kỳ cách nào bạn muốn.Cách đơn giản nhất để làm điều này liên quan đến json.parse () và json tích hợp.built-in JSON. parse() and JSON.