DEV Community

Will Munslow
Will Munslow

Posted on

6 1

How to serialize that $%*#ing Buffer

I've been playing with TextEncoder and TextDecoder. Methods in the Web Crypto API work with a BufferSource which is fine but I need to encrypt some text, store it (actually send it, but it's stored), then decrypt it. For that, I needed to store and read the buffers. Encoding and decoding a buffer is simple, serializing and deserializing is simple AFTER you figure it out.

First, we need a buffer.

const buffer = new TextEncoder().encode('banana');
Enter fullscreen mode Exit fullscreen mode

Not a problem. But now I want to put that in JSON (probably with a bunch of other properties) and read it back in later.

const testObj = {
    encodedText: buffer.toString()
};

const serializedTestObj = JSON.stringify(testObj);
Enter fullscreen mode Exit fullscreen mode

If we log that out it looks pretty simple:

{"encodedText":"98,97,110,97,110,97"}
Enter fullscreen mode Exit fullscreen mode

Getting an object is simple

const deserializedTestObj = JSON.parse(serializedTestObj);
Enter fullscreen mode Exit fullscreen mode

But how do we get the encodedText back into a buffer? This is the part that seems really simple once you stop thinking so hard. Split the string on the commas into an array and use the from method of the TypedArray to get a Uint8Array.

const deserializedBuffer = deserializedTestObj.encodedText.split(',');
const newBuffer = Uint8Array.from(deserializedBuffer);
Enter fullscreen mode Exit fullscreen mode

Then it's a simple decode to get our string back

const str = new TextDecoder().decode(newBuffer);
console.log(str); // banana
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay