Perbezaan antara storan tempatan, storan sesi dan kuki dalam JavaScript

JavaScript menyediakan tiga mekanisme untuk menyimpan data di sisi pelanggan - kuki, storan sesi dan storan tempatan. Setiap mekanisme ada kelebihan dan kekurangan.

Storan Tempatan ialah mekanisme terkini. Ia membenarkan sejumlah besar data disimpan, tetapi data tidak dipadamkan apabila penyemak imbas ditutup. Storan tempatan berguna untuk menyimpan data yang perlu diakses oleh pengguna kemudian, seperti data luar talian.

Storan SesiSerupa dengan kuki, tetapi data hanya disimpan untuk sesi semasa. Ini bermakna data akan dipadamkan apabila pengguna menutup pelayar. Storan sesi berguna untuk menyimpan data sensitif seperti bukti kelayakan log masuk.

Cookie ialah mekanisme tertua dan paling terkenal. Ia mudah digunakan dan disokong dengan baik oleh pelayar. Walau bagaimanapun, ia terhad kepada 4KB data dan sering digunakan untuk menyimpan data tidak sensitif seperti pilihan pengguna.

Dalam tutorial ini, kami akan membincangkan setiap satu daripada mereka secara terperinci.

Storan Tempatan

Kebanyakan aplikasi web hari ini memerlukan beberapa jenis input pengguna, sama ada nama pengguna, alamat penghantaran, atau malah tetapan keutamaan. Input itu kemudiannya biasanya dihantar ke pelayan di suatu tempat untuk pemprosesan dan penyimpanan. Tetapi bagaimana jika aplikasi anda memerlukan data untuk disimpan secara setempat pada komputer pengguna? Di sinilah storan tempatan masuk.

Storan tempatan ialah sejenis storan web yang membenarkan JavaScript menyimpan dan mengakses data terus dalam penyemak imbas. Ini amat berguna untuk menyimpan data yang anda ingin simpan walaupun pengguna menutup penyemak imbas, seperti pilihan atau tetapan.

Data dalam storan setempat disimpan dalam pasangan kunci/nilai. Kuncinya adalah seperti nama data dan nilainya seperti data sebenar itu sendiri. Anda boleh menganggapnya sebagai pembolehubah dalam JavaScript. Untuk menyimpan data dalam storan setempat, anda perlu mencipta kunci terlebih dahulu. Anda kemudiannya boleh menyimpan sebarang data yang anda inginkan di bawah kunci itu.

Untuk mencipta kunci, gunakan kaedah setItem(). Kaedah ini mengambil dua parameter, yang pertama adalah kunci dan yang kedua adalah nilai yang akan disimpan.

localStorage.setItem('key', 'value');

Sekarang anda mempunyai kunci, anda boleh menyimpan sebarang data yang anda inginkan di bawah kunci itu. Data yang anda simpan boleh menjadi sebarang jenis data yang disokong oleh JavaScript, termasuk rentetan, nombor, objek dan tatasusunan.

Untuk menyimpan data, gunakan kaedah setItem() sekali lagi. Kali ini, anda memasukkan kunci sebagai parameter pertama dan data untuk disimpan sebagai parameter kedua.

localStorage.setItem('key', 'value');

Untuk mendapatkan semula data daripada storan setempat, gunakan kaedah getItem(). Kaedah ini mengambil kunci sebagai parameter dan mengembalikan data yang disimpan di bawah kunci itu.

localStorage.getItem('key');

Jika anda ingin mengalih keluar item daripada storan setempat, gunakan kaedah removeItem(). Kaedah ini mengambil kunci sebagai parameter dan memadamkan data yang disimpan di bawah kunci itu.

localStorage.removeItem('key');

Storan Sesi

Storan Sesi ialah sejenis storan web yang membolehkan aplikasi web menyimpan data secara setempat dalam penyemak imbas pengguna. Tidak seperti kuki, data yang disimpan dalam storan sesi adalah khusus untuk tapak yang menciptanya dan data itu tidak dikongsi dengan tapak lain.

Storan Sesi ialah ciri baharu yang diperkenalkan dalam HTML5 yang membolehkan anda menyimpan data secara setempat dalam penyemak imbas pengguna. Tidak seperti kuki, data yang disimpan dalam storan sesi adalah khusus untuk tapak yang menciptanya dan data itu tidak dikongsi dengan tapak lain.

Storan sesi ialah cara menyimpan data pada sisi klien aplikasi. Ia serupa dengan Storan tempatan, tetapi dengan beberapa perbezaan utama -

• Data storan sesi hanya tersedia untuk tapak yang menciptanya.

Data storan sesi tidak dikongsi dengan tapak lain.

• Data storan sesi tidak berterusan, bermakna ia hanya tersedia semasa sesi pengguna.

• Data storan sesi adalah khusus untuk tab penyemak imbas yang menciptanya.

Storan sesi ialah cara terbaik untuk meningkatkan prestasi aplikasi web anda dengan mengurangkan jumlah data yang perlu dipindahkan antara pelanggan dan pelayan. Ia juga boleh digunakan untuk menyimpan data dengan cara yang lebih selamat, kerana data tidak disimpan dalam kuki yang boleh diakses oleh tapak web pihak ketiga.

Untuk menggunakan storan sesi dalam aplikasi web, anda perlu menggunakan objek sessionStorage. Objek ini menyediakan akses kepada storan sesi semasa.

sessionStorage object mempunyai dua kaedah

setItem() - Kaedah ini menetapkan storan sesi pasangan kunci/nilai.

sessionStorage.setItem("name", "tutorialsPoint");

getItem() - Kaedah ini mendapatkan semula nilai kunci daripada storan sesi.

var name = sessionStorage.getItem("name");

sessionStorage object mempunyai beberapa sifat lain -

• length - Sifat ini mengembalikan bilangan pasangan kunci/nilai dalam storan sesi.

• key() - Kaedah ini menerima indeks sebagai parameter dan mengembalikan kunci pada indeks tersebut dalam stor sesi

Storan sesi bagus untuk meningkatkan prestasi aplikasi web dan menyimpan data dengan cara yang lebih selamat kaedah.

Cookie

Cookie 是存储在用户计算机上的一小段数据。 Cookie 用于存储有关用户的信息，例如用户的姓名、密码和偏好设置。

Cookie 是使用 document.cookie 属性创建的。此属性用于设置、获取和删除 Cookie。

设置 Cookie

使用 setItem() 方法设置 Cookie。该方法接受两个参数，cookie的名称和cookie的值。

cookie的名称用于标识cookie，值是要存储在cookie中的信息。 cookie。

以下代码设置一个名为“name”和值“tutorialsPoint”的 cookie。

document.cookie = "name=tutorialsPoint";

读取 Cookie

使用 getItem() 方法读取 Cookie。此方法接受 cookie 的名称作为参数并返回 cookie 的值。

如果 cookie 不存在，getItem() 方法将返回 null。

以下代码读取“name”cookie 并将值存储在“user”变量中。

var user = document.cookie.getItem("name");

与本地存储和会话存储相比，cookie 的一个优点是它们可以设置为在特定时间过期，这使得它们成为存储不应长期保留的数据（例如会话 ID）的不错选择。

本地存储、会话存储和 Cookie 之间的区别

下表突出显示了本地存储、会话存储和 Cookie 之间的主要区别 -

本地存储	会话存储	Cookie
允许存储10MB的数据。	允许存储5MB的数据。	存储容量限制为4KB数据。
关闭浏览器时不会删除存储的数据。	存储数据仅用于会话并会在浏览器关闭时被删除。	数据可以设置为在某个时间过期。
本地存储对于存储用户稍后需要访问的数据，例如离线数据。	会话存储是提高 Web 应用程序性能的好方法。	Cookie 是一个不错的选择用于存储不应该长时间保留的数据，例如会话 ID。
这对于存储即使用户关闭也希望保留的数据特别有用浏览器，例如首选项或设置。	会话存储对于存储敏感数据（例如登录凭据）非常有用。	Cookie 通常用于存储不敏感的数据，例如用户偏好
本地存储是HTML5中引入的新功能	会话存储是HTML5中引入的新功能HTML5	Cookie 是最古老的 (HTML4) 和最著名的机制。
数据是不随客户端请求发送到服务器。	数据不随客户端请求发送到服务器	数据随客户端请求发送到服务器
数据存储在浏览器和系统上。	数据仅存储在浏览器上。	数据仅存储在浏览器上。

结论

在本教程中，我们讨论了本地存储、会话存储之间的区别和饼干。我们已经看到了从该存储中存储和检索数据的不同方法。 本地存储是最新的机制。它允许存储更大量（10MB）的数据，但关闭浏览器时数据不会被删除。 会话存储与cookie类似，但仅存储当前会话的数据。这意味着当用户关闭浏览器时数据将被删除。 Cookie 是最古老、最著名的机制。它们使用简单并且受到浏览器的良好支持。但是，它们仅限于 4KB 的数据，并且通常用于存储不敏感的数据，例如用户首选项。

Atas ialah kandungan terperinci Perbezaan antara storan tempatan, storan sesi dan kuki dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!