At some point in the past, someone decided to use cookies for authentication, and ever since, the term has been closely linked to that single function. However, I’m here to reveal that cookies have a much broader purpose. Essentially, a cookie allows a server to save various types of data directly onto a user’s browser. The best part? The browser takes care of sending this data back to the server with each request automatically—no extra effort is required from developers. This feature is fascinating because it means the server can keep information in cookies that it can access anytime the browser connects again.
Now, let’s explore the potential of this concept further; how about we create a key-value store powered by cookies? It might sound a bit wild, but it’s more practical than you may think! For those who want to dive straight into the code without all the background details, you can find everything publicly available at https://github.com/sdnts/cookeys. And if you’re already well-versed in how cookies work, feel free to skip ahead!
A cookie is a unique header that your web browser includes in every request sent to the server that generated it. Below is an example of a TypeScript HTTP server that logs all incoming cookies and sends one back as well:
“`typescript
import serve from bun;
serve(async (request: Request) => {
console.log(Received cookies:, request.headers.get(cookie));
return new Response(ok, {
headers: {
Set-Cookie: foo bar,
},
});
});
“`
I am utilising Bun’s HTTP server for this purpose. The specific runtime is optional here; Bun simply provides the fastest method to set up a local HTTP server. If you are using a different framework, you only need to adjust how you initiate your HTTP server; the rest of the code will remain unchanged.
When you access localhost:3000 through your browser, the initial response will log Received cookies:
Let’s experiment with this for scientific purposes. You can create a persistent cookie by sending a Set-Cookie header from your server. To remove cookies, the process is slightly more complicated since you need to assign an expiration date in the past (I prefer setting it to 0). The browser will automatically delete cookies it considers expired. Below is an HTTP server that utilises a key-value store backed by cookies:
“`javascript
import serve from bun;
import { parse, serialize } from cookie;
serve(fetch(request: Request) {
const url = new URL(request.url);
// Convert the incoming cookie string into a JavaScript object
const cookies = parse(request.headers.get(cookie) ?? );
// Create a copy of this object to manage deletions
const db = Object.assign({}, cookies);
if (URL.pathname === /put) {
// Add each query parameter to our cloned JavaScript object
url.searchParams.forEach((value, key) => {
db[key] = value;
});
} else if (URL.pathname === /delete) {
// Remove all query parameters from our cloned JavaScript object
url.searchParams.forEach((_, key) => {
delete db[key];
});
}
const headers = new Headers();
Object.keys(cookies).forEach((key) => {
if (db[key]) {
// If a key exists in both incoming cookies and our clone, update its value and set the corresponding cookie.
headers.append(Set-Cookie, serialize(key, db[key]));
} else {
// If a key exists in incoming cookies but not in our clone, mark it as deleted by setting an expired cookie.
headers.append(Set-Cookie, serialize(key, , { expires: new Date(0) }));
}
});
return Response.json(db, { headers });
});
“`
When you access localhost:3000 for the first time, you should see an empty object displayed in your browser. To add a key to your database, navigate to localhost:3000/put?foo=bar. You can repeat this action multiple times (this method also allows you to update existing keys). To remove a key, go to localhost:3000/delete?foo. If you keep the DevTools open on the Cookies section of your browser, you’ll observe them being updated!
By adding some user interface controls, you can create an editable table featuring key-value pairs in its columns. Each row includes a button for deleting a key-value pair. The source code for this is publicly available if you’re interested: https://github.com/sdnts/cookeys. While one might argue that localStorage makes this approach redundant—and they would have a point—having a client-isolated key-value store on your server can effectively address several specific issues without the need for a database or additional JavaScript. Feel free to utilise this information, but exercise caution since browsers can modify cookies; always ensure to sign and encrypt them to confirm their authenticity.
How to Manage Cookies in Maxthon Browser
1. Open Maxthon Browser: Launch the Maxthon browser on your device by clicking its icon from your desktop or application menu.
2. Access Settings: Click on the three horizontal lines (menu icon) located in the upper right corner of the window. From the drop-down menu, select “Settings” to open the settings panel.
3. Navigate to Privacy Settings: In the settings menu, look for the Privacy section on the left sidebar. This is where you can manage all privacy-related features, including cookies.
4. Find Cookie Management Options: Within the Privacy settings, locate and click on “Cookies.” Here, you will see options related to cookie handling, such as turning cookies on or off.
5. Choose Your Preferences: You can select different cookie management options, such as “Allow All Cookies,” “Block Third-Party Cookies,” or “Block All Cookies.” Choose based on your preference for privacy versus convenience.
6. View Stored Cookies: To review existing cookies stored on your browser, look for an option labelled See All Cookies. This will provide you with a list of websites that have saved cookies.
7. Delete Specific Cookies: To remove specific cookies, select a website from this list and click on “Remove” or a similar option to delete just those cookies without affecting others.
8. Clear All Cookies (Optional): If you wish to start fresh, consider clicking on “Clear Browsing Data,” where you can choose to delete all cookies alongside other browsing data such as history and cached files.
9. Save Changes and Exit: After making adjustments according to your preferences, make sure any changes are automatically saved when you exit settings. Then, close the settings panel and continue browsing securely!