Tại sao giỏ hàng lại lưu lại ở trong Session?

Mình nghĩ như thế khá hay. Nhỡ người ta lựa hàng chán, chọn vài cái xong lại đổi ý không muốn mua, chỉ việc tắt trình duyệt là xong. Chứ nếu muốn mua món khác mà họ lại phải tự tay bỏ cái list cũ thì cũng hơi dị.

Chưa kể trường hợp nhiều người dùng chung máy.

Mình nghĩ như thế khá hay. Nhỡ người ta lựa hàng chán, chọn vài cái xong lại đổi ý không muốn mua, chỉ việc tắt trình duyệt là xong. Chứ nếu muốn mua món khác mà họ lại phải tự tay bỏ cái list cũ thì cũng hơi dị.

Chưa kể trường hợp nhiều người dùng chung máy.

Dạ em thì nghĩ là cũng có thể tạo 1 cái DB , nếu trong trường hợp mà người dụng như anh/chị nói là không muốn mua nữa thì em sẽ tạo 1 nút xóa hết ạ ? Không biết như vậy có ổn không mong được anh/chị chỉ dạy

Lưu trong local storage thì sẽ ko bị mất mà Thoòng tin cũng lưu đc nhiều hơn

Không đăng nhập thì lưu Cookie hoặc LocalStorage (javascript).
Đăng nhập thì lưu CSDL.

Lưu Session thì đúng là không tiện tí nào.

Nhớ lúc trước mình có mua đồ trên Lazada (không đăng nhập), mới chỉ chọn chứ chưa đặt đơn hàng. Mấy ngày sau mở lên thì vẫn giỏ hàng mà mình đã chọn.

Dữ liệu trên session nó thể hiện người dùng tương tác vơi web trong thời gian nhất định (different state). Người dùng có thể add/remove liên tục.
Việt tắc mở browser session thì giỏ hàng bị remove là đúng khi sử dụng session.
Nếu muôn lưu lại thì dùng localstorage của browser.
Nếu em lưu db, thì việc tương tác liên tục với db sẽ làm giảm pefomance, không tốt.

Vấn đề db performance có thể giải quyết bằng cache cũng được. Với lại để sản phẩm trên cookie thì mỗi lần request nó gửi lên server luôn, 1 client thì không vấn đề, nhưng 1 tr clients thì đúng là rất mệt.
LocalStorage thì không transfer lên server nhưng lại tách biệt giữa các origin (bao gồm protocol + domain + port), chỉ cần khác origin giữa http và https là không access của nhau được.
Còn session thì như các bạn đã thảo luận.

Ngoài ra các site thương mại điện tử lớn có nhu cầu phân tích dữ liệu dữ lắm, ngay cả việc bỏ vào giỏ hàng mà không mua, họ cũng thu thập và phân tích để xem tại sao. Cho nên đưa về server là giải pháp hợp lý.

local storage

Đây là lần đầu tiên em nghe tới khái niệm “local storage” , em sẽ tìm hiểu để áp dụng
Em xin chân thành cảm ơn ạ

vâng khái niệm “LocalStorage” lần đầu em nghe, em sẽ tìm hiểu ạ
Bác phân tích rất đúng , em sẽ tiếp thu và học hỏi , em xin cảm ơn ạ

vâng bác phân tích chí phải , em đang nghĩ cho trường hợp xấu ví dụ bị tắt trình duyệt đột ngột , máy sụp nguồn… thì người dùng cũng không phải chọn lại từ đầu đỡ cực ạ

Dạ bác phân tích đúng ạ , nhưng hiện tại em đang làm quy mô nho nhỏ áp dụng cho mục tiêu là cửa hàng kinh doanh không phải doanh nghiệp , em thấy những cửa hàng nhỏ thì họ không quan tâm lắm tới việc mình cho giỏ hàng mà k tạo đơn hàng ( mua ) nên em nghĩ em sẽ không đưa lên sever ạ .
Em cảm ơn bác rất nhiều ạ

Không đăng nhập thì lưu Cookie hoặc LocalStorage (javascript).
Đăng nhập thì lưu CSDL.

Lưu Session thì đúng là không tiện tí nào.

Nhớ lúc trước mình có mua đồ trên Lazada (không đăng nhập), mới chỉ chọn chứ chưa đặt đơn hàng. Mấy ngày sau mở lên thì vẫn giỏ hàng mà mình đã chọn.

Dữ liệu trên session nó thể hiện người dùng tương tác vơi web trong thời gian nhất định (different state). Người dùng có thể add/remove liên tục.
Việt tắc mở browser session thì giỏ hàng bị remove là đúng khi sử dụng session.
Nếu muôn lưu lại thì dùng localstorage của browser.
Nếu em lưu db, thì việc tương tác liên tục với db sẽ làm giảm pefomance, không tốt.

Vấn đề db performance có thể giải quyết bằng cache cũng được. Với lại để sản phẩm trên cookie thì mỗi lần request nó gửi lên server luôn, 1 client thì không vấn đề, nhưng 1 tr clients thì đúng là rất mệt.
LocalStorage thì không transfer lên server nhưng lại tách biệt giữa các origin (bao gồm protocol + domain + port), chỉ cần khác origin giữa http và https là không access của nhau được.
Còn session thì như các bạn đã thảo luận.

Ngoài ra các site thương mại điện tử lớn có nhu cầu phân tích dữ liệu dữ lắm, ngay cả việc bỏ vào giỏ hàng mà không mua, họ cũng thu thập và phân tích để xem tại sao. Cho nên đưa về server là giải pháp hợp lý.

Lưu trong local storage thì sẽ ko bị mất mà Thoòng tin cũng lưu đc nhiều hơn

Mọi người cho em hỏi không biết em tìm hiểu không đúng hay thế nào nhưng về cú pháp khởi tạo của LocalStorage là

localStorage.setItem(“key-String”, “Value-String”);

Nếu như thế này thì hơi khó vì nếu em muốn lưu giỏ hàng thì phải làm thế nào ạ ?
Em đang nghĩ là lưu dạng này :

localStorage.setItem(“Mã sản phẩm”, “Tên sản phẩm⌂Hình ảnh⌂Số lượng⌂Đơn giá⌂Thành Tiền”);
VD:
localStorage.setItem(“1”, “Mật ong⌂Mat1.png⌂2⌂110000⌂220000"”);"

Mỗi lần lấy thông tin từ localStorage em sẽ cắt chuỗi bằng ký tự ⌂ , như vậy có ổn không ạ ?
Em mới chỉ nghĩ ra cách đó , rất mong được mọi người chỉ dạy ạ .

Đưa value vào json rồi encode base64 hoặc gì cũng được nhé. Đừng expose data ra nhiều quá.

Nếu được em xin 1 đoạn code mẫu về cách lưu Json vào localStorage và cách lấy ngược Json từ localStorage được k ạ , Json với em cũng là một khái niệm mới ạ.

à em hiểu rồi , cảm ơn bác đã chỉ dạy ạ .

Đại loại nó như thế này:

static jsonParse(input: any): string {
    try {
        return JSON.parse(input);
    } catch (error) {
        return String(input);
    }
}

static setStorage(key: string, value: any): void {
    try {
        const newValue = JSON.stringify(value);
        localStorage.setItem(LOCAL_STORAGE_PREFIX + '_' + key, newValue);
    } catch (error) {
        console.log(error);
    }
}

static setStorageObj(input: Object): void {
    for (let key in input) {
        const value = input[key];
        this.setStorage(key, value);
    }
}

static getStorageObj(key: string): Object {
    try {
        let value = this.jsonParse(localStorage.getItem(LOCAL_STORAGE_PREFIX + '_' + key));
        if (value && typeof value === 'object') {
            return value;
        }
        return {};
    } catch (error) {
        return {};
    }
}

static getStorageStr(key: string): string {
    try {
        let value = this.jsonParse(localStorage.getItem(LOCAL_STORAGE_PREFIX + '_' + key));
        if (!value || typeof value === 'object') {
            return '';
        }
        return String(value);
    } catch (error) {
        return '';
    }
}

static removeStorage(key: string): void {
    localStorage.removeItem(LOCAL_STORAGE_PREFIX + '_' + key);
}

vì hiểu biết nông cạn xin bác chỉ dạy thêm , em muốn dùng localStorage để lưu thông tin đăng nhập có ổn không ạ , hiện em đang lưu trên cookie để người dùng tắt đi bật lại vẫn giữ phiên đăng nhập ( tùy chọn “remember me”) nhưng em đang đọc thì thấy cookie nó không bảo mật cho lắm , dễ bị đánh cắp nên em tính chuyển qua localStorage , không biết điều này có được không ạ ?

Về vấn đề bảo mật thì localStorage hoàn toàn có thể bị đánh cắp do nó lưu trực tiếp xuống browser mà không được mã hoá bảo vệ.
Bạn chỉ nên lưu dữ liệu không nhạy cảm, theo mình dữ liệu giỏ hàng không có gì cần phải giấu diếm cả nên hoàn toàn có thể lưu ở localStorage.

dạ vâng em hiểu rồi ạ , nhưng em thấy tất cả các trang web có phần “Remember me” khi đăng nhập kể cả dạy nhau học thì khi tắt trình duyệt đi rồi bật lại thì phiên đăng nhập vẫn được giữ , vậy cho em hỏi làm sao có thể làm được như vậy ạ ?

Theo mình hiểu thì SESSION vẫn còn sống khi mình tắt trình duyệt đi mở lại, chỉ có Flash SESSION mới chết sau 1 phiên, nếu authenticate lưu ở SESSION thì sau khi tắt mở lại vẫn vào được.
Còn nếu authenticate 1 SPA app nghĩa là frontend dùng 100% js chạy độc lập, giao tiếp với server qua API thì ở client khi login thành công sẽ được nhận 1 key (1 chuỗi kí tự và số). Client lưu chuỗi đó ở localStorage (có khả năng bị đánh cắp) để sau đó chèn vào các Header khi cần consume API nào cần authenticate.
Để giảm thiểu việc bị đánh cắp key, mình hay gửi kèm key vàn Fingeprint của máy, thường mỗi máy sẽ có 1 fingerprint (1 chuỗi kí tự) khó trùng nhau.
Nên ai đó chôm được key nhưng ngồi ở máy khác dùng vẫn không dùng được.

Ôi liên quan tới bảo mật đúng là khổ quá mà :((
Em cảm ơn bác nhiều ạ