Javascript 计算字符串在localStorage中所占字节数

要计算字符串在localStorage中所占字节数，需要先了解以下几个概念：

1. 字符串长度：字符串中字符的个数。
2. 字符编码：字符在计算机中的储存方式。常见的有ascii码、unicode、utf-8等。
3. 字节：计算机中数据的存储单位。

在localStorage中储存字符串时，它实质上是以字节的形式储存的。因此，计算字符串在localStorage中所占字节数，需要先计算它的字节长度，然后再加上字符串编码所占字节数。

具体步骤如下：

1. 计算字符串的字节长度

可以使用TextEncoder API中的 encode 方法将字符串编码成字节数组，然后通过数组的长度（即字节数）来计算字符串所占字节数。示例如下：

const str = "Hello, world!";
const encoder = new TextEncoder('utf-8');
const bytes = encoder.encode(str);
const byteLength = bytes.length;
console.log(byteLength); // 输出：14

1. 计算字符串编码所占字节数

常见的字符编码包含ascii码、unicode、utf-8等。可以通过以下代码来计算它们的字节数：

ASCII 码：每个字符占用 1 个字节。

Unicode 码：每个字符占用 2 个字节。

UTF-8 码：每个字符占用不等定的字节数（1-4个字节），根据字符串的不同而变化。

示例代码如下：

// ASCII 码
const str1 = "Hello, world!";
const byteLength1 = str1.length; //每个字符都占用1个字节
console.log(byteLength1); // 输出：13

// Unicode 码
const str2 = "你好，世界！";
const byteLength2 = str2.length * 2; //每个字符占用2个字节
console.log(byteLength2); // 输出：12

// UTF-8 码
const str3 = "?❤️?"; // 一个emoji表情占用4个字节
const encoder = new TextEncoder('utf-8');
const bytes = encoder.encode(str3);
const byteLength3 = bytes.length;
console.log(byteLength3); // 输出：12

通过以上步骤可以得到字符串在localStorage中所占字节数：

const str = "Hello, world!";
const encoder = new TextEncoder('utf-8');
const bytes = encoder.encode(str);
const byteLength = bytes.length + str.length; // 字符串字节长度 + 字符串编码所占字节数
console.log(byteLength); // 输出：27

另外，计算字符串在localStorage中的最大占用空间时需要考虑localStorage所能储存的最大容量，通常为5 - 10MB之间。如果字符串的占用空间超过了localStorage容量，则会出现存储失败的情况。因此，在储存字符串时需要进行容量的检测。

示例说明：

假设localStorage容量为5MB，我们要储存字符串"hello world"，则需要先计算它在localStorage中的占用空间，如下：

const str = "hello world";
const encoder = new TextEncoder('utf-8');
const bytes = encoder.encode(str);
const byteLength = bytes.length + str.length;

可以得到byteLength为11。因此，如果储存此字符串，需要先检测localStorage中是否还有足够的剩余空间，如下：

const maxByte = 5 * 1024 * 1024;  //5MB
const usedByte = unescape(encodeURIComponent(JSON.stringify(localStorage))).length;
if (maxByte - usedByte >= byteLength) {
  // 存储字符串
  localStorage.setItem("myStr", str);
} else {
  // 超出存储大小，给出提示
  console.log("LocalStorage已满，无法存储该字符串");
}