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

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs