Hướng dẫn store javascript code in database - lưu trữ mã javascript trong cơ sở dữ liệu

Tôi có một ý tưởng cho một ứng dụng web trong đó người dùng có thể gửi mã JavaScript mà sau đó có thể được phục vụ cho người dùng khác. Tôi đang tự hỏi cách tốt nhất để đi về điều này. Có thể lưu trữ JavaScript trong cơ sở dữ liệu và sau đó phục vụ nó cho người dùng khi họ yêu cầu không? Tôi cũng muốn có thể đính kèm siêu dữ liệu vào từng đoạn mã: tên, xếp hạng người dùng, v.v., vì vậy một cơ sở dữ liệu có vẻ như là giải pháp tự nhiên cho tâm trí có phần không phù hợp của tôi. Tôi đang xem xét sử dụng đường ray trên phần phụ trợ với MongoDB.

Show

hỏi ngày 30 tháng 6 năm 2010 lúc 2:19Jun 30, 2010 at 2:19

Hướng dẫn store javascript code in database - lưu trữ mã javascript trong cơ sở dữ liệu

8

JavaScript là một chuỗi văn bản. Cơ sở dữ liệu có thể lưu trữ các chuỗi văn bản. Do đó, cơ sở dữ liệu có thể lưu trữ JavaScript.

Trừ khi bạn có một số ý tưởng cụ thể mà tôi đang thiếu, tôi hoàn toàn đồng ý với tình cảm của @aircule.

Wow, tôi không nghĩ rằng tôi đã thấy một ý tưởng tồi tệ hơn ở độ tuổi.

Đã trả lời ngày 30 tháng 6 năm 2010 lúc 2:27Jun 30, 2010 at 2:27

lừa dối ♦ lừa dốideceze

498K81 Huy hiệu vàng719 Huy hiệu bạc867 Huy hiệu đồng81 gold badges719 silver badges867 bronze badges

3

Vâng, có vẻ như bạn đã nắm bắt được những gì được yêu cầu. Chỉ cần cẩn thận để không thực thi mã tùy ý - bạn có thể bước vào một thế giới của XSS bị tổn thương.

Trừ khi bạn sẽ nhận được hàng triệu lượt truy cập một phút, bất kỳ cơ sở dữ liệu hoặc khung nào cũng sẽ ổn.

Đã trả lời ngày 30 tháng 6 năm 2010 lúc 2:27Jun 30, 2010 at 2:27

lừa dối ♦ lừa dốinickf

498K81 Huy hiệu vàng719 Huy hiệu bạc867 Huy hiệu đồng198 gold badges641 silver badges720 bronze badges

Vâng, có vẻ như bạn đã nắm bắt được những gì được yêu cầu. Chỉ cần cẩn thận để không thực thi mã tùy ý - bạn có thể bước vào một thế giới của XSS bị tổn thương.

Trừ khi bạn sẽ nhận được hàng triệu lượt truy cập một phút, bất kỳ cơ sở dữ liệu hoặc khung nào cũng sẽ ổn.Jun 30, 2010 at 3:25

NickfnickfMatt Briggs

526K198 Huy hiệu vàng641 Huy hiệu bạc720 Huy hiệu đồng15 gold badges93 silver badges126 bronze badges

0

Tài liệu về nhà → Hướng dẫn sử dụng MongoDBMongoDB Manual

Ghi chú

Không lưu trữ logic ứng dụng trong cơ sở dữ liệu. Có những hạn chế về hiệu suất để chạy JavaScript bên trong MongoDB. Mã ứng dụng cũng thường hiệu quả nhất khi nó chia sẻ kiểm soát phiên bản với chính ứng dụng.

Có một bộ sưu tập hệ thống đặc biệt có tên

const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');
8 có thể lưu trữ các chức năng JavaScript để tái sử dụng.

Để lưu trữ một chức năng, bạn có thể sử dụng

const todosUl = document.querySelector('.todos');
const input = document.querySelector('#add');
const saveBtn = document.querySelector('#save');
9, như trong các ví dụ sau:

db.system.js.insertOne(
{
_id: "echoFunction",
value : function(x) { return x; }
}
);
db.system.js.insertOne(
{
_id : "myAddFunction" ,
value : function (x, y){ return x + y; }
}
);

  • Trường

    const todos = ['play piano', 'write some code', 'swim'];
    
    0 giữ tên của hàm và là duy nhất cho mỗi cơ sở dữ liệu.

  • Trường

    const todos = ['play piano', 'write some code', 'swim'];
    
    1 giữ định nghĩa hàm.

Các chức năng này, được lưu dưới dạng JavaScript loại BSON, có sẵn để sử dụng từ bất kỳ ngữ cảnh JavaScript nào, chẳng hạn như

const todos = ['play piano', 'write some code', 'swim'];
2 và
const todos = ['play piano', 'write some code', 'swim'];
3

Các chức năng được lưu dưới dạng JavaScript loại BSON không dùng nữa (với phạm vi), tuy nhiên, không thể được sử dụng bởi

const todos = ['play piano', 'write some code', 'swim'];
2 và
const todos = ['play piano', 'write some code', 'swim'];
3 bắt đầu trong MongoDB 4.4.

Hướng dẫn store javascript code in database - lưu trữ mã javascript trong cơ sở dữ liệu

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àm thế nào chúng ta có thể lưu trữ dữ liệu trong JavaScript mà không cần cơ sở dữ liệu?

Tôi sẽ sử dụng một số mã từ mẫu Hello-Sqlite của Glitch, bạn có thể chơi xung quanh và phối lại mà không có tài khoản ..

// Xin chào-Sqlite ..

Đặt fs = yêu cầu ('fs') ;.

  1. Đặt dbfile = './.data/sqlite.db'; // Tệp cơ sở dữ liệu của chúng tôi ..
  2. hãy tồn tại = fs. ....
  3. Đặt sqlite3 = yêu cầu ('sqlite3'). ....
  4. Đặt db = sqlite3 new ..
  5. 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ợ.
  6. 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.
  7. 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.

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:

  1. Đặt dbfile = './.data/sqlite.db'; // Tệp cơ sở dữ liệu của chúng tôi ..
  2. hãy tồn tại = fs. ....
  3. Đặt sqlite3 = yêu cầu ('sqlite3'). ....

Đặt db = sqlite3 new ..

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.

  1. 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.
  2. 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:

HTML

Chúng tôi liên kết tệp kiểu và tập lệnh bằng cách sử dụng thuộc tính

const todos = ['play piano', 'write some code', 'swim'];
8. Từ khóa trì hoãn có nghĩa là JavaScript của chúng tôi sẽ tải sau khi HTML tải xong.

Cơ thể có

const todos = ['play piano', 'write some code', 'swim'];
9 để gử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);
})
0 để lưu trữ và
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 để hiển thị
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);
})
0.

CSS

Chúng tôi hiển thị nội dung của cơ thể ở trung tâm. Chỉ đị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);
})
0 một số phần đệm để nhường chỗ cho nhấp đúp vào khi chúng tôi bắt đầu xóa chúng.

JavaScript

Chúng tôi có 3 tệp javascript: static.js để lưu trữ tĩnh, local.js cho

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 và db.js cho
const todos = ['play piano', 'write some code', 'swim'];
6. Chúng tôi sẽ chuyển nguồn tập lệnh (HTML) của họ tùy thuộc vào bộ lưu trữ mà chúng tôi đang làm việc.

Hãy tương tác với DOM.

Chúng tôi bắt đầu bằng cách lấy

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,
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);
})
7 và lưu
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);
})
8. Và giữ chúng theo các biến như hình dưới đây:

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

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);
})
0 như

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 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); }) 0 như

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

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

0 để đảm bả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);
})
0 có sẵn để được hiển thị khi tải trang.

Chúng tôi lặp qua 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); }) 0, tạo một phần tử localStorage.setItem('store_name', 'data_name'); //e.g localStorage.setItem('name', 'Ahmed'); 3 và hiển thị từng việc cần làm trên trang. Chúng ta có thể thêm 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); }) 0 mới vào mảng bằng hàm localStorage.setItem('store_name', 'data_name'); //e.g localStorage.setItem('name', 'Ahmed'); 5.

Nhược điểm

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

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);
})
0 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 những cách khác để lưu trữ
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);
})
0.

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

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

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

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

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);
})
0 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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

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

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);
})
0 như

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

1. Lưu trữ tĩnh

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

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

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);
})
0 như

Chúng tôi chạy mã bên trong đối tượng cửa sổ với localStorage.setItem('store_name', 'data_name'); //e.g localStorage.setItem('name', 'Ahmed'); 0 để đảm bả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); }) 0 có sẵn để được hiển thị khi tải trang.

Chúng tôi lặp qua

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);
})
0, tạo một phần tử
localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

3 và hiển thị từng việc cần làm trên trang. Chúng ta có thể thêm
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);
})
0 mới vào mảng bằng hàm
localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

5.

Nhược điểm

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

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);
})
0 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 những cách khác để lưu trữ
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);
})
0.

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

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

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

9. 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à

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

8 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,
localStorage.setItem('store_name', 'data_name'); 
//e.g
localStorage.setItem('name', 'Ahmed');

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

const todos = ['play piano', 'write some code', 'swim'];
6 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.clear();
9. Thêm đối tượng
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

0. 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ừ

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

1. Trong MongoDB, chúng tôi sẽ gọi chúng là
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

2.

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

3 cho phép chúng tôi thực hiện CRUD trong
const todos = ['play piano', 'write some code', 'swim'];
6. Trong quá trình này, chúng tôi sử dụng
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

5 để lặp qua các bản ghi trong cửa hàng đố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.

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6 bằng hàm
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

7.

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6 bằng hàm
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

7.

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

8 bằng phương pháp
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

9.

Ở đâ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

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
0 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à
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
1. 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à

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
2. Ở đây,
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
3 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
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
2 để cho
const todos = ['play piano', 'write some code', 'swim'];
6 tự động tăng nó. Sau đó, chúng tôi nói
const todos = ['play piano', 'write some code', 'swim'];
6 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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6. Sau đó, chúng ta có thể hiển thị kết quả bằng hàm
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
8.

//addTodos()

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

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);
})
0, 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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6 bằng hàm
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

7.

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

8 bằng phương pháp
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

9.

Ở đâ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

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
0 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à
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
1. 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à

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
2. Ở đây,
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
3 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
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
2 để cho
const todos = ['play piano', 'write some code', 'swim'];
6 tự động tăng nó. Sau đó, chúng tôi nói
const todos = ['play piano', 'write some code', 'swim'];
6 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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6. Sau đó, chúng ta có thể hiển thị kết quả bằng hàm
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
8.

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

//deleteTodos()

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6 bằng hàm
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

7.

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

6 bằng hàm
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

7.

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

const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

8 bằng phương pháp
const getTodos = () => {
    let todos;
    if(localStorage.getItem('todos') === null){
        todos = [];
    }else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    return todos;
}

9.

Ở đâ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

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
0 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à
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
1. 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à

const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
2. Ở đây,
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
3 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
const saveTodos = inputData => {
    const todos = getTodos();
    todos.push(inputData);
    localStorage.setItem('todos', JSON.stringify(todos));
}
2 để cho
const todos = ['play piano', 'write some code', 'swim'];
6 tự động tăng nó. Sau đó, chúng tôi nói
const todos = ['play piano', 'write some code', 'swim'];
6 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.

Tôi có thể sử dụng JavaScript với cơ sở dữ liệu không?

JavaScript là ngôn ngữ phía máy khách chạy trong trình duyệt và MySQL là công nghệ phía máy chủ chạy trên máy chủ. Bạn cần sử dụng Node.js ngôn ngữ phía máy chủ để kết nối với cơ sở dữ liệu MySQL.You need to use the server-side language Node. js to connect to the MySQL Database.

Tôi nên lưu trữ các tập lệnh JavaScript ở đâu?

Các tập lệnh có thể được đặt trong hoặc trong phần của trang HTML hoặc trong cả hai.in the , or in the section of an HTML page, or in both.

Làm thế nào để bạn lưu trữ 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ữ ..

Làm thế nào chúng ta có thể lưu trữ dữ liệu trong JavaScript mà không cần cơ sở dữ liệu?

Tôi sẽ sử dụng một số mã từ mẫu Hello-Sqlite của Glitch, bạn có thể chơi xung quanh và phối lại mà không có tài khoản ...
// Xin chào-Sqlite ..
Đặt fs = yêu cầu ('fs') ;.
Đặt dbfile = './.data/sqlite.db';// Tệp cơ sở dữ liệu của chúng tôi ..
hãy tồn tại = fs.....
Đặt sqlite3 = yêu cầu ('sqlite3').....
Đặt db = sqlite3 new ..