Summarize this content to 400 words in Persian Lang <\/p>\n
\u067e\u06cc\u0634 \u062f\u0631\u0622\u0645\u062f<\/p>\n
\u0647\u0645\u0647 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0631\u0627\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f. \u0627\u06af\u0631 \u0622\u0646\u0647\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0646\u0645\u06cc \u06a9\u0631\u062f\u0646\u062f\u060c \u062f\u0646\u06cc\u0627\u06cc \u0645\u0627 \u0646\u0633\u0628\u062a\u0627\u064b \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u06cc\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0647\u0633\u062a\u06cc\u062f\u060c \u0645\u0637\u0645\u0626\u0646 \u0647\u0633\u062a\u0645 \u06a9\u0647 \u0627\u0632 \u0642\u0628\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0641\u0636\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0627\u0631\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0647 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\n
\u0645\u0646 \u0627\u06cc\u0646 \u0631\u0627 \u062f\u0631 Google Docs \u0645\u06cc \u0646\u0648\u06cc\u0633\u0645. \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u0642\u0628\u0644 \u0627\u0632 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627\u06cc Google\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0686\u06cc\u0632 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a\u060c \u0632\u06cc\u0631\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0631 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u06a9\u0647 \u0645\u0646 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u062f\u0631 \u062f\u0633\u062a\u06af\u0627\u0647 \u0645\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 Docs \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0648\u062f\u0646 \u0633\u0631\u0648\u0631 \u062e\u0627\u0631\u062c\u06cc \u0648\u0627\u0628\u0633\u062a\u0647 \u0646\u06cc\u0633\u062a.<\/p>\n
\u06a9\u0648\u06a9\u06cc\u200c\u0647\u0627 \u0642\u062f\u06cc\u0645\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0647\u0633\u062a\u0646\u062f \u2013 \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0648\u0621 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062a\u0648\u0633\u0637 \u0627\u0634\u062e\u0627\u0635 \u062b\u0627\u0644\u062b \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u0646\u062f. \u0622\u0646\u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627 \u0628\u0647 \u0647\u0631 \u062d\u0627\u0644 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0622\u0646\u0647\u0627 \u06cc\u06a9 \u062f\u0627\u0633\u062a\u0627\u0646 \u0628\u0631\u0627\u06cc \u0632\u0645\u0627\u0646 \u062f\u06cc\u06af\u0631\u06cc \u0647\u0633\u062a\u0646\u062f.<\/p>\n
\u0633\u067e\u0633 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062c\u0644\u0633\u0647 \u0648 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc \u0645\u0646\u0627\u0633\u0628 \u062f\u0627\u0631\u06cc\u0645. \u0622\u0646\u0647\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06cc\u06a9\u0633\u0627\u0646 \u0647\u0633\u062a\u0646\u062f\u060c \u0628\u0647 \u062c\u0632 \u062f\u0627\u0645\u0646\u0647 \u0648 \u0637\u0648\u0644 \u0639\u0645\u0631\u0634\u0627\u0646.<\/p>\n
\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0647\u0631 \u0645\u0628\u062f\u0623 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0647\u0631 \u0632\u0645\u0627\u0646 \u0648 \u0627\u0632 \u0647\u0631 \u0628\u0631\u06af\u0647 \u0627\u06cc \u06a9\u0647 \u0627\u0632 \u0647\u0645\u0627\u0646 URL \u0628\u0627\u0632\u062f\u06cc\u062f \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0647\u0645\u0627\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062c\u0644\u0633\u0647\u0627\u0632 \u0633\u0648\u06cc \u062f\u06cc\u06af\u0631\u060c \u062f\u0631 \u0647\u0631 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u0622\u0646 \u0628\u0647 \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062d\u062f\u0648\u062f \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0627\u06cc \u0627\u0632 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u0648\u06cc\u0646\u062f\u0648\u0632\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u062f\u0648\u0646 \u062a\u062f\u0627\u062e\u0644 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f\u060c \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628 \u0627\u0633\u062a. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0645\u0627 \u0646\u06cc\u0633\u062a.<\/p>\n
\u0635\u0628\u0631 \u06a9\u0646\u06cc\u062f\u060c \u06a9\u062f\u0627\u0645 \u0627\u0644\u0632\u0627\u0645\u0627\u062a\u061f \u062f\u0642\u06cc\u0642\u0627 \u062f\u0646\u0628\u0627\u0644 \u0686\u06cc \u0647\u0633\u062a\u06cc\u0645\u061f<\/p>\n
\u0645\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc Scanbot Web SDK \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n
\u0627\u06cc\u0646 SDK \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 API \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0633\u0631\u0648\u06a9\u0627\u0631 \u062f\u0627\u0631\u062f. \u0648\u0642\u062a\u06cc \u06cc\u06a9 \u0633\u0646\u062f \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0627\u0633\u06a9\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0641\u0642\u0637 \u06cc\u06a9 \u062f\u0633\u062a\u0647 \u0631\u0634\u062a\u0647 \u0648 \u0627\u0639\u062f\u0627\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u06cc\u06a9\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u062a\u06cc\u062c\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0628\u0627 \u0645\u062e\u062a\u0635\u0627\u062a \u0645\u06a9\u0627\u0646 \u0633\u0646\u062f \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u06a9\u0646 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc\u060c \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062e\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062f\u0627\u062f\u0647 \u0628\u0627\u06cc\u0646\u0631\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f (\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0628\u06cc\u0634\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f). \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0634\u0648\u0646\u062f \u0648 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0634\u0648\u0646\u062f.<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645 (\u0645\u0646 \u0628\u0647\u200c\u062e\u0627\u0637\u0631 \u0627\u062e\u062a\u0635\u0627\u0631\u060c \u062d\u0627\u0634\u06cc\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc\u200c\u0647\u0627 \u0648 \u0627\u0646\u0648\u0627\u0639 \u0646\u0627\u0645\u0631\u0628\u0648\u0637 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645):<\/p>\n
class CroppedDetectionResult {
\n croppedImage: RawImage | null;
\n originalImage: Image;
\n status: DetectionStatus = “NOT_ACQUIRED”;
\n detectionScores: DetectionScores;
\n points: Point[];
\n horizontalLines: LineSegment[];
\n verticalLines: LineSegment[];
\n aspectRatio: number;
\n averageBrightness: number = 0;
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f\u060c \u062e\u06cc\u0644\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0646\u06cc\u0633\u062a. \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0639\u062f\u0627\u062f \u0648 \u0631\u0634\u062a\u0647 \u0647\u0627\u060c \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u0644\u0627\u0633 \u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0646\u0648\u0627\u0639.<\/p>\n
\u062a\u0646\u0647\u0627 \u062f\u0648 \u0628\u062e\u0634 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0647\u0633\u062a\u0646\u062f: RawImage\u060c \u06a9\u0647 \u062d\u0627\u0648\u06cc Uint8Array \u062f\u0627\u062f\u0647 \u0647\u0627\u060c \u0648 Image\u060c \u06a9\u0647 \u0646\u0648\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646\u062a\u0631\u0641\u06cc\u0633 \u0647\u0627 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u062f ImageData\u060c ArrayBuffer\u060c Uint8Array \u0648 RawImage \u062e\u0648\u062f<\/p>\n
\u067e\u0633 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/p>\n
\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc<\/p>\n
\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647\u060c OG \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645: localStorage. \u0627\u0632 \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u0645 \u062e\u0648\u062f\u0645 \u0631\u0627 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631 \u0628\u0646\u0627\u0645\u0645\u060c \u0627\u0632 \u0633\u0627\u0644 2009 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a. \u0622\u0647\u060c \u0632\u0645\u0627\u0646\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647\u200c\u062a\u0631. localStorage \u0647\u0646\u0648\u0632 \u062f\u0631 \u0627\u0646\u0648\u0627\u0639 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 API \u062f\u0631 \u0637\u0648\u0644 \u0627\u0639\u0635\u0627\u0631 \u0646\u0633\u0628\u062a\u0627\u064b \u067e\u0627\u06cc\u062f\u0627\u0631 \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0648\u0627\u0631\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u0645.<\/p>\n
\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0634\u06cc \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0641\u0642\u0637 \u0627\u0633\u062a\u062e\u0648\u0627\u0646 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0622\u0646 \u0628\u062f\u0648\u0646 \u0646\u06af\u0631\u0627\u0646\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u06cc\u0627 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc.<\/p>\n
\u062a\u062c\u0632\u06cc\u0647 JSON \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 localStorage \u0641\u0642\u0637 \u0631\u0634\u062a\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u06cc\u200c\u067e\u0630\u06cc\u0631\u062f\u060c \u06a9\u0647 \u0646\u0634\u0627\u0646\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0646\u06cc\u0633\u062a. \u0648 \u0627\u06cc\u0646\u062c\u0627\u0633\u062a:<\/p>\n
export default class SBStorage {<\/p>\n
static storeDocument(source: CroppedDetectionResult): void {
\n localStorage.setItem(“document”, JSON.stringify(source));
\n }<\/p>\n
static getDocument(): CroppedDetectionResult {
\n const item = localStorage.getItem(“document”);
\n return item ? JSON.parse(item) : null;
\n }
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0645\u0646 \u0641\u0642\u0637 \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645 \u06a9\u0647 \u06cc\u06a9 \u0633\u0646\u062f \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0634\u062f\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f\u060c \u0627\u0645\u0627 \u067e\u0631\u0648\u0698\u0647 \u0634\u0631\u0648\u0639 React \u0645\u0646 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u06cc\u06a9 \u0627\u0633\u062a\u062b\u0646\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f:<\/p>\n
sb-storage.ts:7 Uncaught (in promise) DOMException: Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘document’ exceeded the quota.
\n at SBStorage.storeDocument (<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0632\u06cc\u0628\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0686\u0646\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0622\u0646 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a localStorage: https:\/\/arty.name\/localstorage.html. \u0627\u0632 \u0632\u0645\u0627\u0646 \u0646\u0648\u0634\u062a\u0646 \u0627\u06cc\u0646\u060c \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0645\u0646 5\u060c200\u060c000 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0639\u062f\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 \u0646\u0633\u062e\u0647 \u0627\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0645\u062a\u0641\u0627\u0648\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n
\u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0633\u0627\u06cc\u062a \u062d\u062a\u06cc \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u062f:<\/p>\n
Chrome 6.0.472.36 \u0628\u062a\u0627 \u0628\u0647 \u0645\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f 2600-2700 \u0647\u0632\u0627\u0631 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u0645\u060c \u0641\u0627\u06cc\u0631\u0641\u0627\u06a9\u0633 3.6.8 \u2013 5200-5300k\u060c Explorer 8 \u2013 4900-5000k\u060c \u0648 Opera 10.70 build 9013 \u06cc\u06a9 \u062f\u06cc\u0627\u0644\u0648\u06af \u0638\u0627\u0647\u0631 \u0634\u062f \u06a9\u0647 \u0628\u0647 \u0645\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f \u062a\u0627 \u0641\u0636\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0646\u0627\u0645\u062d\u062f\u0648\u062f \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0645. Spec \u062e\u0648\u062f\u0633\u0631\u0627\u0646\u0647 5 \u0645\u06af\u0627\u0628\u0627\u06cc\u062a \u0641\u0636\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627 \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u0686\u06cc\u0632\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0646\u0645\u06cc \u06af\u0648\u06cc\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 UTF-16 \u0634\u0645\u0627 \u062f\u0648 \u0628\u0631\u0627\u0628\u0631 \u06a9\u0645\u062a\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0647 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645. \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0631\u06cc\u0639 \u062f\u0631 \u0642\u0637\u0639\u0647 \u0645\u0648\u062c\u0648\u062f\u2026<\/p>\n
const value = JSON.stringify(source);
\nconsole.log(“Characters:”, value.length);
\nlocalStorage.setItem(“document”, value);<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
… \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a:<\/p>\n
Characters: 68046772<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0639\u0644\u0648\u0645 \u0627\u0633\u062a\u060c localStorage \u062d\u062a\u06cc \u0646\u0645\u06cc \u062a\u0648\u0627\u0646 \u06cc\u06a9 \u062f\u0647\u0645 \u0622\u0646 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f.<\/p>\n
\u0627\u06af\u0631\u0686\u0647 \u0645\u0627 \u0642\u0628\u0644\u0627\u064b \u062b\u0627\u0628\u062a \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0645\u0646\u0627\u0633\u0628\u06cc \u0646\u06cc\u0633\u062a\u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u0628\u0647 \u0627\u06cc\u0646 \u0648\u0627\u0642\u0639\u06cc\u062a \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u0645 \u06a9\u0647 localStorage \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u0631\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0645\u0646 \u062f\u0631 \u0648\u0647\u0644\u0647 \u0627\u0648\u0644 \u0642\u0631\u0627\u0631 \u0628\u0648\u062f \u0628\u0647 \u0622\u0646 \u0628\u0631\u0633\u0645\u060c \u0627\u0645\u0627 \u062f\u0631 \u0639\u0648\u0636 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0628\u0627 \u0645\u0648\u0636\u0648\u0639 \u0633\u0647\u0645\u06cc\u0647 \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u06cc\u0645.<\/p>\n
\u0645\u0646 \u0641\u0642\u0637 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645 \u06a9\u0647 \u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc \u0628\u0627 \u0641\u0631\u0645\u062a \u062f\u0627\u062f\u0647 \u0628\u0627\u06cc\u0646\u0631\u06cc \u0686\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0642\u0627\u0644\u0628 \u0645\u0627 croppedImage \u062f\u0627\u062f\u0647 \u06cc\u06a9 \u0627\u0633\u062a Uint8Array. \u06a9\u0645 \u0648 \u0628\u06cc\u0634 \u0634\u0628\u06cc\u0647 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f (\u0627\u06cc\u0646 \u0622\u0631\u0627\u06cc\u0647 \u062f\u0631 \u0648\u0627\u0642\u0639 1,504,272 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0637\u0648\u0644 \u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u0634\u0631\u0648\u0639 \u0622\u0646 \u0627\u06cc\u0646\u062c\u0627\u0633\u062a):<\/p>\n[169, 195, 195, 169, 195, 195, 168, 194, 194, 168, …<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
After serialization, the same array looks like the following:<\/p>\n
{“0″:169,”1″:195,”2″:195,”3″:169,”4″:195,”5″:195,”6″:168,”7″:194,”8″:194,”9”:168, …<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
We\u2019ll get into why this is in a later section, but what we need to know right now is that localStorage only accepts strings and therefore doesn\u2019t support binary formats out of the box.<\/p>\n
There are ways to get around this \u2013 you can probably already imagine an algorithm to turn this map of keys and values back into an array of integers. It\u2019s always going to be a hack, though. You just shouldn\u2019t have to manipulate binary data manually.<\/p>\n
Base64<\/p>\n
The correct way to do this would be to convert the image data to a Base64 image first, which we can then store properly.<\/p>\n
Base64 is a family of binary-to-text encoding schemes that represent binary data in an ASCII string format by transforming it into a radix-64 representation.<\/p>\n
That may sound complicated, but it\u2019s really a straightforward process. You simply create a reader object, pass your array as a blob, and read it in as a data URL using the native JavaScript function. If necessary, also remove the descriptor part of the string. Here\u2019s the convenience function we use:<\/p>\n
public static async toBase64(data: Uint8Array): Promise<string> {
\n \/\/ See https:\/\/stackoverflow.com\/a\/39452119
\n const base64url = await new Promise<string>(resolve => {
\n const reader = new FileReader()
\n reader.onload = () => resolve(reader.result as string)
\n reader.readAsDataURL(new Blob([data]))
\n })\u061b
\n \/\/ \u0642\u0633\u0645\u062a 'data:…;base64' \u0631\u0627 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f
\n \u0628\u0627\u0632\u06af\u0634\u062a base64url.\u0628\u0631\u0634(base64url.indexOf('\u060c') + 1)
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0648 \u0633\u067e\u0633 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631\u060c \u0627\u06af\u0631 \u062e\u06cc\u0644\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc \u0646\u0628\u0627\u0634\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0645\u062d\u0644\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0634\u0648\u0646\u062f:<\/p>\n
const base64 = await ImageUtils.toBase64(source.croppedImage.data);
\n\/\/ Base64: wsLQw8LQw8LQw8TRxMXSxMXTxcfUxcjVxMjVxcnXx8vaztHh1dbm19np2dvr2Nv…
\nconsole.log(“Base64: “, base64);<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0647\u0631 \u0646\u0648\u0639 \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc \u0628\u0627 \u0627\u06cc\u0646 \u0628\u0632\u0631\u06af\u06cc \u0627\u0632 \u0646\u0638\u0631 \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc \u0633\u0646\u06af\u06cc\u0646 \u0627\u0633\u062a\u060c \u0686\u0647 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0646\u0642\u0634\u0647 \u06a9\u0644\u06cc\u062f-\u0645\u0642\u062f\u0627\u0631 \u06cc\u0627 \u0646\u0633\u062e\u0647 Base64\u060c \u0648 \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0633\u0639\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0628\u0647\u06cc\u0646\u0647 \u0628\u0627\u0634\u06cc\u0645. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0622\u0646 \u0631\u0627 \u0642\u0637\u0639 \u0646\u0645\u06cc \u06a9\u0646\u062f. \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645.<\/p>\n
\u0648 \u0627\u06cc\u0646 \u0645\u0627 \u0631\u0627 \u0628\u0647 \u2026<\/p>\n
\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc<\/p>\n
\u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0645\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 \u0641\u0627\u06cc\u0644 \u0647\u0627 (\u0627\u06cc\u062c\u0627\u062f\u060c \u0622\u067e\u0644\u0648\u062f\u060c \u062f\u0627\u0646\u0644\u0648\u062f) \u0645\u0648\u0627\u062c\u0647 \u0645\u06cc \u0634\u0648\u06cc\u0645. \u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0639\u0645\u0648\u0644\u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a – \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n
\u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0645\u0627\u0646\u0646\u062f ArrayBuffer\u060c Uint8Array\u060c DataView\u060c Blob \u0648 File\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc \u0638\u0631\u06cc\u0641 \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0645\u0647\u0645 \u0646\u06cc\u0633\u062a\u0646\u062f.<\/p>\n
\u0628\u0647 \u0647\u0631 \u062d\u0627\u0644\u060c \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a ArrayBuffer – \u0631\u06cc\u0634\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u062e\u0627\u0645. \u0648 \u0627\u06cc\u0646 \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0627 \u0622\u0646 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc wrapper \u0641\u0648\u0642\u200c\u0627\u0644\u0630\u06a9\u0631 \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u062f\u0627\u0631\u0627\u06cc \u062a\u0646\u0648\u0639\u06cc \u0627\u0632 \u06cc\u06a9 \u0627\u0633\u062a ArrayBuffer.<\/p>\n
\u0647\u0645\u0647 \u0686\u06cc\u0632 \u06cc\u06a9 \u0634\u06cc \u0627\u0633\u062a (\u062a\u0642\u0631\u06cc\u0628\u0627)<\/p>\n
\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u062a\u0648\u0636\u06cc\u062d \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062f\u0644\u06cc\u0644 \u0631\u0634\u062a\u0647 ArrayBuffer \u06cc\u0627 Uint8Array \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 \u06a9\u0645\u06cc \u06a9\u0627\u0628\u0648\u0633 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628 \u0627\u0633\u062a. \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0648\u0627\u0642\u0639 \u06cc\u06a9 \u0634\u06cc \u0627\u0633\u062a\u060c \u0628\u0647 \u062c\u0632 \u0631\u0634\u062a\u0647 \u0647\u0627. \u0631\u0634\u062a\u0647 \u0647\u0627 \u0647\u0646\u0648\u0632 \u0647\u0645 \u0631\u0634\u062a\u0647 \u0647\u0633\u062a\u0646\u062f. \u0627\u0645\u0627 \u0628\u0627 \u0622\u0631\u0627\u06cc\u0647 \u0647\u0627\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f:<\/p>\n
const a = [1, 2, 3]; a.foo = “bar”console.log(a); \/\/ [ 1, 2, 3, foo: ‘bar’]\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u062f\u0644\u06cc\u0644\u0634 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0628\u0648\u0645\u06cc\u060c \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0647\u0646\u0648\u0632 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0634\u06cc \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062f\u0631 \u0622\u0646 \u0631\u0634\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f \u0646\u06af\u0627\u0647 \u06a9\u0631\u062f\u0646 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0633\u0627\u062f\u0647 \u0641\u0642\u0637 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 toString() \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0631\u0627\u062d\u062a\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u0632\u06cc\u0631\u0627 \u0627\u063a\u0644\u0628 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a.<\/p>\n
\u0648 \u062f\u0642\u06cc\u0642\u0627\u064b \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0628\u0646\u062f \u0646\u0627\u0641 Uint8Array \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0634\u06cc \u0627\u0632 \u062c\u0641\u062a \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f-\u0645\u0642\u062f\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f (\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f {“0″:169,”1″:195,”2″:195,”3”:169 \u2026} \u0645\u062b\u0627\u0644 \u0642\u0628\u0644\u06cc) \u0648 \u0627\u06cc\u0646\u06a9\u0647 \u0686\u0631\u0627 \u0645\u0627 \u0628\u0647 \u0645\u0631\u0627\u062d\u0644 \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc \u0635\u062d\u06cc\u062d \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n
\u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0631\u0632\u0634 \u0622\u0646 \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u06a9\u062a\u0647 \u0627\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0628\u0647 \u0622\u0646 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u0645 \u062a\u0648\u0636\u06cc\u062d \u062f\u0647\u06cc\u0645: \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a\u0646\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0647\u0646\u0648\u0632 \u0627\u0633\u0627\u0633\u0627\u064b \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u060c \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u06cc\u0646 \u0631\u0648\u0632\u0647\u0627 \u0627\u0632 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0628\u0648\u0645\u06cc \u0628\u0631\u0627\u06cc \u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc \u0628\u0631\u062e\u0648\u0631\u062f\u0627\u0631 \u0627\u0633\u062a\u060c \u0628\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 TextDecoder. \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f:<\/p>\n
const buffer = new TextEncoder().encode(‘banana’);
\nconst testObj = { encodedText: buffer.toString() };<\/p>\n
const serializedTestObj = JSON.stringify(testObj);
\nconsole.log(serializedTestObj); \/\/ {“encodedText”:”98,97,110,97,110,97″}<\/p>\n
const deserializedTestObj = JSON.parse(serializedTestObj);
\nconst deserializedBuffer = deserializedTestObj.encodedText.split(‘,’);
\nconst newBuffer = Uint8Array.from(deserializedBuffer);
\nconst str = new TextDecoder().decode(newBuffer);
\nconsole.log(str); \/\/ banana<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 \u0648\u06cc\u0644 \u0645\u0627\u0646\u0633\u0644\u0648 \u0627\u0632 dev.to \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0642\u0637\u0639\u0647!<\/p>\n
\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0647\u0633\u062a \u0646\u0633\u0628\u062a\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc\u060c \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f:<\/p>\n
\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0631\u0634\u062a\u0647\u200c\u0627\u06cc \u0628\u0627\u0634\u0646\u062f \u06a9\u0647 \u0628\u0627 \u06a9\u0644\u0627\u0633 \u06a9\u062f\u06af\u0630\u0627\u0631 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u06a9\u0647 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0633\u0628\u062a\u0627\u064b \u063a\u06cc\u0631 \u0645\u0639\u0645\u0648\u0644 \u0627\u0633\u062a (\u062f\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0627\u0631\u062f \u0634\u0645\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f).
\n \u0634\u06a9\u0627\u0641\u062a\u0646 \u0631\u0634\u062a\u0647\u060c \u06a9\u0647 \u06cc\u06a9 \u0639\u0645\u0644 \u06af\u0631\u0627\u0646 \u0642\u06cc\u0645\u062a \u0627\u0633\u062a.
\n \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646\u060c \u0647\u0645 \u0633\u0631\u06cc\u0627\u0644\u200c\u0632\u062f\u0627\u06cc\u06cc \u0628\u0627\u0641\u0631 \u0648 \u0647\u0645 \u0631\u0645\u0632\u06af\u0634\u0627\u06cc\u06cc \u0645\u062a\u0646 \u062f\u0648\u0628\u0627\u0631\u0647.<\/p>\n
\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0631\u0648\u0634 \u0628\u0639\u062f\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0648\u0628 \u0628\u0631\u0648\u06cc\u0645.<\/p>\n
IndexedDB<\/p>\n
\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c IndexedDB \u0686\u06cc\u0633\u062a\u061f \u0645\u0646 \u0628\u0627 \u06a9\u0645\u0627\u0644 \u0645\u06cc\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0646\u0645\u0627\u06cc \u06a9\u0648\u062a\u0627\u0647\u06cc \u0627\u0632 \u0645\u0641\u0647\u0648\u0645 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0645\u060c \u0627\u0645\u0627 MDN \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u062c\u0647 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f:<\/p>\n
IndexedDB \u06cc\u06a9 API \u0633\u0637\u062d \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0627\u062e\u062a\u0627\u0631\u06cc\u0627\u0641\u062a\u0647\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627\/\u062d\u0628\u0627\u0628 \u0647\u0627 \u0627\u0633\u062a. \u0627\u06cc\u0646 API \u0627\u0632 \u0634\u0627\u062e\u0635 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062c\u0633\u062a\u062c\u0648\u0647\u0627\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
\u0622\u0646\u0686\u0647 \u06a9\u0647 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0645\u0639\u0646\u06cc \u062f\u0627\u0631\u062f\u060c \u06cc\u06a9 \u0631\u0627\u0647 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u0641\u0648\u0642 \u0627\u0644\u0630\u06a9\u0631 \u0627\u0633\u062a ArrayBuffer \u0642\u0627\u0644\u0628 \u0628\u0644\u0647\u060c \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0646\u0637\u0642 \u0631\u0645\u0632\u06af\u0634\u0627\u06cc\u06cc \u0648 \u0631\u0645\u0632\u06af\u0634\u0627\u06cc\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c \u0645\u0632\u062e\u0631\u0641 \u0648 \u062a\u0634\u0646\u0647 \u0645\u0646\u0627\u0628\u0639 \u062e\u0628\u0631\u06cc \u0646\u06cc\u0633\u062a!<\/p>\n
\u0628\u0631\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631 \u0633\u0631\u06cc\u0639\u060c \u0645\u0634\u06a9\u0644\u0627\u062a \u0627\u0635\u0644\u06cc \u0628\u0627 localStorage \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<\/p>\n
\u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0631\u0634\u062a\u0647 \u0647\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u062f.
\n \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u062f\u0631\u067e\u0648\u0634 \u062f\u0627\u062f\u0647 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0648\u0686\u06a9 \u0648 \u0646\u0627\u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u0633\u062a.<\/p>\n
IndexedDB \u0647\u0631 \u062f\u0648\u06cc \u0627\u06cc\u0646 \u0645\u0633\u0627\u0626\u0644 \u0631\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062d\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0622\u0646\u060c \u0645\u0632\u0627\u06cc\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0646\u06cc\u0632 \u062f\u0627\u0631\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0648\u0628\u200c\u06a9\u0627\u0631\u06af\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f (\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0628\u06cc\u0634\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f). \u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0686\u0631\u062e\u0647 \u0631\u0646\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0630\u062e\u06cc\u0631\u0647\/\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u0633\u062f\u0648\u062f \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n
\u062a\u0646\u0647\u0627 \u0686\u06cc\u0632 localStorage \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0633\u0627\u062f\u06af\u06cc API \u0622\u0646 \u0627\u0633\u062a. \u0641\u0642\u0637 \u0647\u0645\u06cc\u0646 \u0627\u0633\u062a localStorage.setItem \u0648 localStorage.getItem. \u0686\u0646\u062f \u06a9\u0627\u0631\u06a9\u0631\u062f \u0631\u0627\u062d\u062a\u06cc \u0627\u0636\u0627\u0641\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0647\u0645\u06cc\u0646 \u0627\u0633\u062a. \u0627\u0646\u062c\u0627\u0645 \u0634\u062f!<\/p>\n
API \u0648 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0622\u0634\u0641\u062a\u0647<\/p>\n
IndexedDB \u0646\u06cc\u0632 \u06a9\u0627\u0645\u0644 \u0646\u06cc\u0633\u062a: API \u0645\u0639\u0631\u0648\u0641 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0622\u0634\u0641\u062a\u06af\u06cc \u0634\u06af\u0641\u062a \u0627\u0646\u06af\u06cc\u0632 \u0627\u0633\u062a. \u062f\u0631 \u0648\u0627\u0642\u0639\u060c \u0627\u06cc\u0646 \u0686\u0646\u06cc\u0646 \u0622\u0634\u0641\u062a\u06af\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u06a9\u0627\u0645\u0644 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 \u0622\u0646 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0645\u0639\u0645\u0648\u0644\u06cc \u0634\u0645\u0627 \u0645\u062c\u0628\u0648\u0631 \u0646\u0628\u0627\u0634\u062f \u0628\u0627 \u0645\u0632\u062e\u0631\u0641\u0627\u062a \u0622\u0646 \u062f\u0633\u062a \u0648 \u067e\u0646\u062c\u0647 \u0646\u0631\u0645 \u06a9\u0646\u062f.<\/p>\n
\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u062e\u0648\u062f \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0622\u0646\u0686\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u0645 \u062a\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n
use-indexeddb \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0642\u0648\u0644 \u0645\u06cc\u200c\u062f\u0647\u062f \u0633\u0628\u06a9\u200c\u062a\u0631\u06cc\u0646 \u0645\u0648\u0631\u062f \u0628\u0627\u0634\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0641\u0642\u0637 \u062a\u0639\u062f\u0627\u062f\u06cc \u0627\u0632 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062f\u0631 \u0628\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0686\u0646\u062f\u0627\u0646 \u0631\u0627\u062d\u062a \u0646\u06cc\u0633\u062a\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0627\u0631\u0627\u06cc \u0628\u0631\u062e\u06cc \u06af\u0632\u0627\u0631\u0634\u200c\u0647\u0627\u06cc \u0646\u0641\u0648\u0630\u06cc \u0627\u0633\u062a \u06a9\u0647 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n
\u0628\u0639\u062f\u06cc Dexie \u0627\u0633\u062a\u060c \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u062a\u0631 \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06a9\u0646\u0646\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f. API \u0622\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647\u060c \u0646\u0648\u0634\u062a\u0646 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062f\u062e\u0644 \u0647\u0627 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0628\u0635\u0631\u06cc \u0627\u0633\u062a:<\/p>\n
const db = new Dexie(‘MyDatabase’);<\/p>\n
\/\/ Declare tables, IDs and indexes
\ndb.version(1).stores({ friends: ‘++id, name, age’ });<\/p>\n
\/\/ Find some old friends
\nconst oldFriends = await db.friends.where(‘age’).above(75).toArray();<\/p>\n
\/\/ or make a new one
\nawait db.friends.add({
\n name: ‘Camilla’,
\n age: 25,
\n street: ‘East 13:th Street’,
\n picture: await getBlob(‘camilla.png’)
\n});<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u062f\u0631 \u0646\u06af\u0627\u0647 \u0627\u0648\u0644\u060c \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u06a9\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u062a LINQ C# \u0627\u0644\u0647\u0627\u0645 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627\u06cc \u0632\u0646\u062f\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0645\u062b\u0644\u0627\u064b Redux \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a\u060c Dexie \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0631\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0627 \u06a9\u0645\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a.<\/p>\n
\u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 idb \u0627\u0633\u062a \u06a9\u0647 \u0627\u062f\u0639\u0627 \u0645\u06cc \u06a9\u0646\u062f \u0628\u06cc\u0634\u062a\u0631 API IndexedDB \u0631\u0627 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u0628\u0627 \u0628\u0631\u062e\u06cc \u0628\u0647\u0628\u0648\u062f\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0627\u0633\u062a. \u0627\u0645\u0627 \u062f\u0631 \u0648\u0627\u0642\u0639\u060c \u0628\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc\u060c \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f \u06a9\u0647 API \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0645\u06cc\u200c\u067e\u06cc\u0686\u062f Promise \u06a9\u0644\u0627\u0633 \u0648 \u0646\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631. \u0642\u0637\u0639\u0627\u064b \u0628\u0631\u0627\u06cc \u0686\u0646\u06cc\u0646 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062c\u0632\u0626\u06cc \u062f\u0631 \u0631\u0627\u062d\u062a\u06cc\u060c \u0627\u0631\u0632\u0634 \u0627\u0641\u0632\u0648\u062f\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0631\u0627 \u0646\u062f\u0627\u0631\u062f.<\/p>\n
\u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0645\u062d\u0628\u0648\u0628 \u0646\u0647\u0627\u06cc\u06cc JsStore \u0646\u0627\u0645 \u062f\u0627\u0631\u062f \u06a9\u0647 IndexedDB API \u0631\u0627 \u062f\u0631 \u06cc\u06a9 API \u0634\u0628\u06cc\u0647 \u0628\u0647 SQL \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n
var insertCount = await connection.insert({ into: ‘Product’, values: [value] });<\/p>\n
var results = await connection.select({ from: ‘Product’, where: { id: 5 } });<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u06a9\u0647 \u0628\u0647 \u0646\u0638\u0631 \u062d\u0642\u06cc\u0631 \u0645\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a \u0686\u0646\u062f\u0627\u0646\u06cc \u0646\u062f\u0627\u0631\u062f. SQL \u0647\u0646\u0648\u0632 \u0628\u0633\u06cc\u0627\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a \u0648 \u0627\u06cc\u062c\u0627\u062f \u062a\u0631\u0627\u06a9\u0646\u0634 \u0647\u0627\u06cc \u06a9\u0645\u062a\u0631 \u0627\u0632 \u062d\u062f \u0628\u0647\u06cc\u0646\u0647 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 SQL \u062e\u0627\u0645 \u0646\u06cc\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0634\u0627\u06cc\u062f \u062e\u06cc\u0644\u06cc \u0628\u062f \u0646\u0628\u0627\u0634\u062f\u060c \u0627\u0645\u0627 \u0645\u0646 \u0628\u0627\u0631\u0647\u0627 \u062a\u0648\u0633\u0637 SQL \u0633\u0648\u0632\u0627\u0646\u062f\u0647 \u0634\u062f\u0647\u200c\u0627\u0645 \u06a9\u0647 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0647 \u0686\u0646\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0646\u0645.<\/p>\n
\u0628\u0647 \u0639\u0644\u0627\u0648\u0647\u060c \u0645\u0627\u0646\u0646\u062f Dexie\u060c \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f JsStore \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0627 \u0646\u06cc\u0632 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0633\u062a.<\/p>\n
\u0635\u0627\u062f\u0642\u0627\u0646\u0647 \u0628\u06af\u0648\u06cc\u0645\u060c \u0627\u0632 \u0642\u0628\u0644 \u0645\u06cc \u062f\u0627\u0646\u0633\u062a\u0645 \u06a9\u0647 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0647\u06cc\u0686 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0642\u0631\u0627\u0631 \u0646\u062e\u0648\u0627\u0647\u0645 \u06af\u0631\u0641\u062a. \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u0646 \u0628\u0648\u062f \u06a9\u0647 \u062f\u0633\u062a\u0645\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0634 \u0627\u0633\u067e\u0627\u0631\u062a\u06cc \u06a9\u062b\u06cc\u0641 \u06a9\u0646\u06cc\u0645 \u0648 \u062f\u06cc\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0647\u06cc\u0686 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0628\u0646\u062f \u0646\u062f\u0647\u06cc\u0645. \u0645\u0646 \u0641\u0642\u0637 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u06cc\u06a9 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0645. \u0627\u06af\u0631 \u0631\u0627\u0647 \u062d\u0644 \u0645\u0627 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0628\u0648\u062f\u060c \u0645\u0646 \u0628\u0627 \u062f\u06a9\u0633\u06cc \u0647\u0645\u0631\u0627\u0647 \u0645\u06cc \u0634\u062f\u0645.<\/p>\n
\u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0633\u067e\u0627\u0631\u062a\u06cc<\/p>\n
\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u06cc\u06a9 SDK \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0647\u0633\u062a\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0647 \u0647\u06cc\u0686 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062e\u0627\u0631\u062c\u06cc \u062a\u06a9\u06cc\u0647 \u06a9\u0646\u06cc\u0645. \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a\u060c \u0648 \u0645\u0627 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0636\u0627\u0641\u0647 \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0632\u06cc\u0631\u0627:<\/p>\n
\u0622\u0646\u0647\u0627 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627 \u0645\u062c\u0648\u0632 \u0645\u06cc \u0622\u06cc\u0646\u062f \u06a9\u0647 \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0622\u0646 \u067e\u0627\u06cc\u0628\u0646\u062f \u0628\u0627\u0634\u06cc\u0645 \u0648 \u0627\u0641\u0634\u0627 \u06a9\u0646\u06cc\u0645.
\n \u0622\u0646\u0647\u0627 \u0633\u0631\u0628\u0627\u0631 \u0631\u0627 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648 \u062a\u0639\u0645\u06cc\u0631\u0627\u062a \u0622\u062a\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f (\u0645\u0637\u0645\u0626\u0646\u0645 \u06a9\u0647 \u062f\u0631\u062f \u0627\u0631\u062a\u0642\u0627\u0621 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f).
\n \u0622\u0646\u0647\u0627 \u0646\u0642\u0627\u0637 \u0634\u06a9\u0633\u062a \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n
\u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0648 \u062f\u0631 \u062d\u062f \u0645\u0639\u0642\u0648\u0644\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631 \u0622\u0646\u0686\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 SDK \u0645\u0627 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f\u060c \u06a9\u0646\u062a\u0631\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.<\/p>\n
\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u0631\u0627\u06cc \u0645\u0646\u0637\u0642 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u0627\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0631\u0648\u0644 \u06a9\u0646\u06cc\u0645!<\/p>\n
\u0627\u0632 \u0646\u0638\u0631 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0645\u0648\u0631\u062f \u0645\u0627 \u0646\u0633\u0628\u062a\u0627\u064b \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0645\u062f\u0644 \u062f\u0627\u062f\u0647 \u0628\u0647 \u062e\u0648\u062f\u06cc \u062e\u0648\u062f \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062a\u0631\u0627\u06a9\u0646\u0634 \u0647\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0646\u06cc\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0631\u062f\u0633\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0646\u062f\u0627\u0634\u062a\u0645. \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u0633\u0627\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
const request = indexedDB.open(“SBSDKBase”, 1);<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0645\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0646\u0627\u0645\u06cc \u0628\u0631\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062f\u0631 \u0646\u0638\u0631 \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645 \u0648 \u0634\u0645\u0627\u0631\u0647 \u0646\u0633\u062e\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u062a\u0639\u06cc\u06cc\u0646 \u0641\u0648\u0631\u06cc \u0634\u0645\u0627\u0631\u0647 \u0646\u0633\u062e\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f\u060c \u0627\u0645\u0627 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u062f\u0644\u06cc\u0644 \u0622\u0646 \u0631\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0631\u0648\u0634\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f: \u0645\u062f\u0644\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0647\u0645\u06cc\u0634\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u06af\u0632\u06cc\u0646\u0647 \u0622\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0646\u0633\u062e\u0647 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u0628\u0635\u0631\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f.<\/p>\n
\u0634\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0627\u0631\u0627\u06cc \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a: onerror\u060c onupgradeneeded\u060c \u0648 onsuccess. \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647 \u0628\u06af\u06cc\u0631\u06cc\u0645\u060c \u0632\u06cc\u0631\u0627 \u0641\u0642\u0637 \u0633\u0639\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0633\u0646\u0627\u062f \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u06cc\u0686 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u062f\u0631 \u0645\u062f\u0644 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0647\u06cc\u0686 \u0646\u0645\u0627\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0645\u0627 \u0641\u0642\u0637 \u0627\u0632 \u062d\u0627\u0644\u062a \u0646\u0648\u0634\u062a\u0646 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 (\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0646\u062e\u0648\u0631\u062f).<\/p>\n
\u062a\u0646\u0647\u0627 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0647 \u0622\u0646 \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f\u06cc\u0645\u060c \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0627\u0633\u062a.<\/p>\n
request.onsuccess = (event) => {
\n const db = (event.target as IDBOpenDBRequest).result;
\n db.createObjectStore(“documents”, { keyPath: “id”, autoIncrement: true });<\/p>\n
const transaction = db.transaction(“documents”, “readwrite”);
\n const store = transaction.objectStore(“documents”);
\n store.add(source);<\/p>\n
console.log(“Added item to store”);<\/p>\n
const getRequest = store.get(1);
\n getRequest.onsuccess = (event) => {
\n const result = (event.target as IDBRequest).result;
\n console.log(“Got item from store”, result);
\n };
\n};<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u06cc\u0646 \u0628\u06cc\u200c\u0633\u0627\u0628\u0642\u0647\u200c\u062a\u0631\u06cc\u0646 \u06a9\u062f \u06a9\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0645 \u0628\u0627\u06cc\u062f \u0633\u0646\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0641\u0636\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645. \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f\u060c \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u0633\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u06cc\u06a9 \u0634\u06cc \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0645\u0646 \u0645\u062f\u062a \u0632\u06cc\u0627\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u0645\u060c \u0631\u0648\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645 \u0648 \u0641\u06a9\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0645 \u06cc\u06a9 \u062f\u0633\u062a\u0647 \u0631\u0648\u06cc \u0622\u0646 \u062f\u0627\u0631\u0645. \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
\u0646\u0647 \u0645\u0646 \u0647\u0645\u0648\u0646 \u0645\u0648\u0642\u0639 \u06af\u0627\u0632 \u06af\u0631\u0641\u062a\u0645 \u062e\u0637\u0627:<\/p>\n
Uncaught DOMException: Failed to execute ‘createObjectStore’ on ‘IDBDatabase’: The database is not running a version change transaction.<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0686\u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u0645 \u062c\u062f\u0648\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0645\u061f \u0645\u0646 \u0628\u0647 \u0633\u062e\u062a\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0647 \u0627\u0645 \u0648 \u0627\u0632 \u0642\u0628\u0644 \u0627\u06cc\u0646 \u0627\u062d\u0633\u0627\u0633 \u0631\u0627 \u062f\u0627\u0631\u0645 \u06a9\u0647 \u0646\u0648\u0634\u062a\u0646 SQL \u062e\u0627\u0645 \u0634\u0647\u0648\u062f\u06cc \u062a\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0633\u062a. \u062f\u0631 \u0622\u0646\u062c\u0627\u060c \u062d\u062f\u0627\u0642\u0644 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0633 \u0627\u0632 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u060c \u06a9\u0648\u0626\u0631\u06cc \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0645\u06cc\u062f\u0648\u0627\u0631 \u0628\u0627\u0634\u06cc\u0645 \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u0628\u0639\u062f \u0628\u0647\u062a\u0631 \u0634\u0648\u062f! \u062d\u062f\u0627\u0642\u0644 \u062e\u0648\u062f \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627 \u0631\u0645\u0632\u0622\u0644\u0648\u062f \u0646\u06cc\u0633\u062a. \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0648\u0628\u0627\u0631\u0647 \u062a\u0644\u0627\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f onupgradeneeded (\u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u0646\u0633\u062e\u0647 db \u062e\u0648\u062f \u0631\u0627 \u0627\u0631\u062a\u0642\u0627 \u062f\u0647\u06cc\u062f):<\/p>\n
request.onupgradeneeded = (event) => {
\n const db = (event.target as IDBOpenDBRequest).result;
\n db.createObjectStore(“documents”, { keyPath: “id”, autoIncrement: true });
\n console.log(“IndexedDB upgraded”, event);
\n};<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0646\u06cc\u0632 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u0645 create \u0645\u0627 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645\u060c \u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0631\u062f\u06cc\u0645:<\/p>\n
request.onsuccess = (event) => {
\n const db = (event.target as IDBOpenDBRequest).result;
\n const transaction = db.transaction(“documents”, “readwrite”);
\n const store = transaction.objectStore(“documents”);
\n store.add(source);
\n console.log(“Added item to store”);<\/p>\n
const getRequest = store.get(1);
\n getRequest.onsuccess = (event) => {
\n const result = (event.target as IDBRequest).result;
\n console.log(“Got item from store”, result);
\n };
\n};<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0648 \u0634\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0634\u062f\u0647 \u0647\u0645\u0686\u0646\u0627\u0646 \u062d\u0627\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0633\u062a Uint8Array \u0642\u0627\u0644\u0628 \u0622\u0628\u062f\u0627\u0631!<\/p>\n
Got item from store {
\n status: ‘OK’,
\n detectionScores: {…},
\n points: Array(4),
\n horizontalLines: Array(5),
\n verticalLines: Array(5), \u2026}
\n aspectRatio: 0.698217078300424averageBrightness: 183
\n croppedImage: {…, format: ‘BGR’, data: Uint8Array(1859760)
\n …
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0628\u0647\u0628\u0648\u062f\u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646<\/p>\n
\u0632\u0645\u0627\u0646 \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0644 \u0641\u0631\u0622\u06cc\u0646\u062f \u06a9\u0645\u06cc \u0631\u0627\u062d\u062a \u062a\u0631 \u0634\u0648\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627\u0632 \u0634\u062f\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0628\u0644\u0648\u06a9 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u062e\u0648\u062f\u0634 \u0628\u067e\u06cc\u0686\u0627\u0646\u06cc\u0645:<\/p>\n
private static openDB(): Promise<IDBDatabase> {
\n return new Promise((resolve, reject) => {<\/p>\n
const DB_NAME = “SBSDKBase”;
\n const DB_VERSION = 4;
\n const request = indexedDB.open(DB_NAME, DB_VERSION);<\/p>\n
request.onsuccess = (event) => {
\n resolve((event.target as IDBOpenDBRequest).result);
\n };<\/p>\n
request.onerror = (event) => { reject(event); };
\n request.onupgradeneeded = (event) => {
\n \/\/ Update object stores when necessary
\n };
\n });
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0648 \u06cc\u06a9 \u0628\u0644\u0648\u06a9 \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u062f \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u06cc\u06af\u0631 \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u0622\u0646 \u0631\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u0645:<\/p>\n
private static async getDocumentStore(): Promise<IDBObjectStore> {
\n const db = await SBStorage.openDB();
\n const transaction = db.transaction(“documents”, “readwrite”);
\n return transaction.objectStore(“documents”);
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0648 \u0627\u06a9\u0646\u0648\u0646 \u0645\u0627 \u062f\u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0639\u0645\u0648\u0645\u06cc \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0628\u0635\u0631\u06cc \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u06cc\u0633 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06cc\u06a9 \u0633\u0646\u062f \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u062f\u0627\u0631\u06cc\u0645:<\/p>\n
static async storeDocument(source: CroppedDetectionResult): Promise<void> {
\n const store = await SBStorage.getDocumentStore();
\n store.add(source);
\n}<\/p>\n
static async getDocuments(): Promise<CroppedDetectionResult[]> {
\n const store = await SBStorage.getDocumentStore();
\n return new Promise((resolve, reject) => {
\n store.getAll().onsuccess = (event) => {
\n const result = (event.target as IDBRequest).result;
\n resolve(result);
\n };
\n });
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0628\u0627\u06cc\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u0635\u062d\u06cc\u062d \u062e\u0637\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f\u060c \u0628\u0627 \u0686\u0646\u062f \u0639\u0645\u0644\u06a9\u0631\u062f wrapper\u060c \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc IndexedDB \u0628\u0647 \u062a\u0646\u0647\u0627\u06cc\u06cc\u060c \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0634\u062e\u0635 \u062b\u0627\u0644\u062b\u060c \u0646\u0633\u0628\u062a\u0627\u064b \u0622\u0633\u0627\u0646 \u0627\u0633\u062a.<\/p>\n
\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627 Promise \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0632 \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u0628\u0631\u06af\u0634\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0631\u0634\u062a\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0645\u0633\u062f\u0648\u062f \u0646\u0645\u06cc \u06a9\u0646\u062f. \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a. \u0645\u0627 \u0641\u0642\u0637 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0642\u0646\u062f\u0647\u0627\u06cc \u0646\u062d\u0648\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u06a9\u062f \u0632\u06cc\u0628\u0627\u062a\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f\u060c \u0648 \u0628\u0647 \u0647\u0631 \u062d\u0627\u0644 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0628\u0648\u062f.<\/p>\n
\u0632\u0645\u0627\u0646 \u0628\u0646\u062f\u06cc \u0645\u0639\u0627\u0645\u0644\u0627\u062a<\/p>\n
\u0627\u0645\u06a9\u0627\u0646 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u062d\u062a\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u0645\u0627 \u062f\u0631 \u0639\u0631\u0636 \u06cc\u06a9 \u062b\u0627\u0646\u06cc\u0647 \u0628\u0647 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0631\u0633\u06cc\u062f. \u0627\u0645\u0627 \u0627\u0628\u062a\u062f\u0627\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0627\u06cc\u0646 \u062a\u0631\u0627\u06a9\u0646\u0634 \u0647\u0627 \u0686\u0642\u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u06cc \u0628\u0631\u062f. \u0634\u0645\u0627 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627\u06cc\u062f \u062f\u0642\u06cc\u0642\u0627 \u0628\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0628\u0647\u06cc\u0646\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0686\u0631\u0627. \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0644\u06cc\u062f\u06cc \u0647\u0633\u062a\u0646\u062f.<\/p>\n
\u0642\u0648\u06cc \u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0641\u0642\u0637 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u062e\u0648\u062f \u0628\u0631\u06af\u0631\u062f\u06cc\u0645 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0646\u062f \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647 \u067e\u0633 \u0627\u0632 \u0647\u0631 \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u06af\u0630\u0634\u062a\u0647 \u0627\u0633\u062a. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n
const currentMS = new Date().getTime();
\nconst request = indexedDB.open(“SBSDKBase”, 4);
\nconsole.log(“Opening indexedDB”, new Date().getTime() – currentMS);<\/p>\n
request.onsuccess = (event) => {
\n const db = (event.target as IDBOpenDBRequest).result;
\n const transaction = db.transaction(“documents”, “readwrite”);
\n const store = transaction.objectStore(“documents”);
\n store.add(source);
\n console.log(“Added item to store”, new Date().getTime() – currentMS);<\/p>\n
const getRequest = store.get(1);
\n getRequest.onsuccess = (event) => {
\n const result = (event.target as IDBRequest).result;
\n console.log(“Got item from store”, new Date().getTime() – currentMS);
\n };
\n};<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
Opening indexedDB 0
\nAdded item to store 17
\nGot item from store 30<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u06cc\u0646 \u062e\u06cc\u0644\u06cc \u0628\u062f \u0646\u06cc\u0633\u062a\u060c \u0627\u0645\u0627 \u0647\u06cc\u0686 \u0686\u06cc\u0632 \u0647\u0645 \u0646\u06cc\u0633\u062a. \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0646 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u0645\u06a9 \u0628\u0648\u06a9 \u067e\u0631\u0648 \u0631\u062f\u0647 \u0628\u0627\u0644\u0627\u062a\u0631 \u0628\u0627 \u062a\u0631\u0627\u0634\u0647 M2 \u0648 SSD \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0645\u060c \u0627\u06cc\u0646 \u0639\u0645\u0644\u06cc\u0627\u062a \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f 20 \u062a\u0627 50 \u0628\u0631\u0627\u0628\u0631 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u06cc\u06a9 \u062f\u0633\u062a\u06af\u0627\u0647 \u0627\u0646\u062f\u0631\u0648\u06cc\u062f \u06cc\u0627 iOS \u0631\u062f\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u062a\u0631 \u0637\u0648\u0644 \u0628\u06a9\u0634\u062f.<\/p>\n
\u0645\u0627 \u0642\u0628\u0644\u0627\u064b \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0648\u0644\u06cc\u0647 IndexedDB \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627 \u0628\u0627 Promises \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0648 \u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a. \u0627\u0645\u0627 \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0628\u0627 \u062a\u06a9\u0647 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u062f\u0627\u062f\u0647 \u0633\u0631 \u0648 \u06a9\u0627\u0631 \u062f\u0627\u0631\u06cc\u0645\u060c \u0627\u0631\u0632\u0634 \u0622\u0646 \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0631\u0648\u06cc \u0645\u0648\u0627\u0632\u06cc \u0633\u0627\u0632\u06cc \u0648\u0627\u0642\u0639\u06cc \u0633\u0631\u0645\u0627\u06cc\u0647 \u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0645\u0648\u0636\u0648\u0639 \u0627\u0635\u0644\u06cc \u062e\u0627\u0631\u062c \u06a9\u0646\u06cc\u0645.<\/p>\n
\u0648 \u0627\u06cc\u0646 \u0645\u0627 \u0631\u0627 \u0628\u0647 \u2026<\/p>\n
\u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u0648\u0628<\/p>\n
\u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u0648\u0628 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627 \u062f\u0631 \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0633\u062a\u0646\u062f. Worker Thread \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0648\u0638\u0627\u06cc\u0641 \u0631\u0627 \u0628\u062f\u0648\u0646 \u062a\u062f\u0627\u062e\u0644 \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f. (MDN)<\/p>\n
\u0627\u06cc\u0646\u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u0648\u0628 \u0628\u0627 \u0648\u0639\u062f\u0647\u200c\u0647\u0627\/\u062a\u0642\u0627\u0636\u0627\u0647\u0627 \u0645\u062a\u0641\u0627\u0648\u062a \u0647\u0633\u062a\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a.<\/p>\n
\u0645\u0646 \u062e\u06cc\u0644\u06cc \u0639\u0645\u06cc\u0642 \u062f\u0631 threading \u063a\u0648\u0637\u0647 \u0648\u0631 \u0646\u0645\u06cc \u0634\u0648\u0645\u060c \u0627\u0645\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647\u060c \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u0627\u0633\u0627\u064b \u062a\u06a9 \u0631\u0634\u062a\u0647 \u0627\u06cc \u0627\u0633\u062a. \u062f\u0631 \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644\u060c \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0641\u0642\u0637 \u0642\u0646\u062f \u0646\u062d\u0648\u06cc \u0628\u0631\u0627\u06cc \u0632\u0646\u062c\u06cc\u0631\u0647\u200c\u0647\u0627\u06cc \u0648\u0639\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0642\u0628\u0644 \u0627\u0632 \u0633\u0627\u06cc\u0631 \u0639\u0645\u0644\u06cc\u0627\u062a \u0637\u0648\u0644\u0627\u0646\u06cc\u200c\u0645\u062f\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u0648\u062f.<\/p>\n
\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u062f\u0648 \u0634\u063a\u0644 \u0647\u0631\u06af\u0632 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0648\u0627\u0632\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062d\u06cc\u0637 \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f. \u06cc\u06a9 \u0639\u0645\u0644\u06cc\u0627\u062a \u0646\u0627\u0647\u0645\u06af\u0627\u0645 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u06cc\u0646 \u062f\u0648 \u06a9\u0627\u0631 \u0627\u0632 \u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0632 \u0627\u06cc\u0646 \u0646\u0638\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u00ab\u0647\u0645\u0632\u0645\u0627\u0646\u00bb \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f. \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0632\u06cc \u0633\u0627\u0632\u06cc \u0648\u0627\u0642\u0639\u06cc\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0631\u0646\u062f\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u060c \u0645\u0627 \u0628\u0647 \u0631\u0634\u062a\u0647 \u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n
\u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647\u060c \u0647\u0645\u0647 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0647 \u0645\u0627 \u0631\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u06af\u0631\u06cc \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0639\u0645\u0644\u06cc\u0627\u062a \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n
\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u0633\u0627\u0633\u06cc \u0648 \u0645\u0634\u06a9\u0644\u0627\u062a<\/p>\n
\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u06a9\u0627\u0631\u06af\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0648\u0631\u062f \u062e\u0627\u0635 \u062e\u0648\u062f\u060c \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0647\u0645\u0627\u0646 \u06a9\u062f \u0645\u062b\u0627\u0644\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0628\u0648\u062f\u060c \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\n
\u062a\u062e\u0645 \u0631\u06cc\u0632\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u06af\u0631 \u06cc\u06a9 \u06a9\u0627\u0631 \u0646\u0633\u0628\u062a\u0627\u064b \u067e\u06cc\u0634 \u067e\u0627 \u0627\u0641\u062a\u0627\u062f\u0647 \u0627\u0633\u062a. \u0627\u0632 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc MDN\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0627\u0631\u06af\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n
onmessage = function(e) {
\n console.log(‘Worker: Message received from main script’);
\n const result = e.data[0] * e.data[1];
\n if (isNaN(result)) {
\n postMessage(‘Please write two numbers’);
\n } else {
\n const workerResult = ‘Result: ‘ + result;
\n console.log(‘Worker: Posting message back to main script’);
\n postMessage(workerResult);
\n }
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0648 \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0627\u0635\u0644\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0628\u0647 \u0622\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n
if (window.Worker) {
\n const myWorker = new Worker(“worker.js”);<\/p>\n
[first, second].forEach(input => {
\n input.onchange = function() {
\n myWorker.postMessage([first.value, second.value]);
\n …<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f\u060c \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0627\u062c\u0631\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0622\u0646 \u0628\u06cc \u0627\u0647\u0645\u06cc\u062a \u0646\u06cc\u0633\u062a. \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0631\u06af\u0631 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u0634\u06a9\u06cc\u0644 \u062f\u0647\u06cc\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0646\u0633\u0628\u062a\u0627\u064b \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f\u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0633\u0627\u062e\u062a \u0634\u0645\u0627 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0646\u06cc\u0632 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n
\u0641\u0627\u06cc\u0644 Worker \u062e\u0648\u062f \u0631\u0627 \u06a9\u062c\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637 Vite \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u062f\u061f \u0648\u0642\u062a\u06cc \u0627\u0632 Webpack \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u062c\u0627 \u0645\u06cc \u0631\u0648\u062f\u061f \u0622\u06cc\u0627 \u0645\u062d\u06cc\u0637 \u0634\u0645\u0627 \u0627\u0632 Webpack \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u062e\u0648\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0633\u062a \u06cc\u0627 \u067e\u0634\u062a \u0633\u06cc\u0633\u062a\u0645 \u0633\u0627\u062e\u062a \u062f\u06cc\u06af\u0631\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u061f \u0627\u06af\u0631 \u062a\u0633\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631\u06cc \u0647\u0645 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0686\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f – \u0622\u06cc\u0627 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0631\u06af\u0631 \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f\u061f<\/p>\n
\u06cc\u0627\u060c \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u062b\u0627\u0644\u06cc \u062f\u0642\u06cc\u0642 \u062a\u0631: \u0645\u0627 \u0627\u0632 Webpack \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 SDK \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0648 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 worker-loader \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0628\u0633\u062a\u0647 \u0634\u062f\u0646 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u062f\u0631 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f. \u0627\u06cc\u0646 \u062e\u06cc\u0644\u06cc \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0645\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u06a9\u062f \u0645\u0646\u0628\u0639 SDK \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u06af\u0632\u06cc\u0646\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0631\u06af\u0631 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0631 \u0622\u0646 \u0645\u062d\u06cc\u0637 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.<\/p>\n
\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062f\u0627\u062f\u0647<\/p>\n
\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647\u200c\u062d\u0644 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u06a9\u062f \u0645\u0646\u0628\u0639 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u0648 \u0633\u067e\u0633 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0632 \u062e\u0648\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0622\u0646 \u062f\u0631 \u06cc\u06a9 \u062d\u0628\u0627\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u0622\u0646 \u0644\u06a9\u0647 \u062f\u0631 worker \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0631\u062c\u06cc (\u0648 \u0627\u0632 Martins Olumide \u062f\u0631 dev.to \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u062a\u0634\u06a9\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645).<\/p>\n
\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f\u060c \u0627\u0645\u0627 \u0631\u0627\u0647 \u062d\u0644\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u062d\u06a9\u0645 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u0633\u062a. \u0634\u0631\u0637 \u0645\u06cc \u0628\u0646\u062f\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644\u060c \u0645\u0627 \u0642\u0637\u0639\u0627\u064b \u0628\u0647 \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0636\u0627\u0641\u06cc \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0622\u06cc\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Webpack \u0628\u0631\u0627\u06cc \u067e\u06cc\u0634 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0622\u0646 \u062f\u0631 \u0628\u0633\u062a\u0647 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n
\u0627\u0628\u062a\u062f\u0627 \u0641\u0627\u06cc\u0644 worker \u067e\u0627\u06cc\u0647 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n
const workerFunction = function () {
\n \/\/ Perform every operation we want in this function
\n self.onmessage = (event: MessageEvent) => {
\n postMessage(‘Message received!’);
\n };
\n};<\/p>\n
\/\/ This stringifies the whole function
\nlet codeToString = workerFunction.toString();
\n\/\/ This brings out the code in the bracket in string
\nlet mainCode = codeToString.substring(codeToString.indexOf(‘{‘) + 1, codeToString.LastIndexOf(‘}’));
\n\/\/ Convert the code into a raw data
\nlet blob = new Blob([mainCode], { type: ‘application\/javascript’ });
\n\/\/ A url is made out of the blob object and we’re good to go
\nlet worker_script = URL.createObjectURL(blob);<\/p>\n
export default worker_script;<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0646\u0638\u0631\u0627\u062a \u062f\u0631 \u0628\u0644\u0648\u06a9 \u0628\u0627\u0644\u0627 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0645\u0644\u0627\u064b \u0648\u0627\u0636\u062d \u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u0627 \u0642\u0635\u062f \u0627\u0646\u062c\u0627\u0645 \u0622\u0646 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645: \u0645\u0627 \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06cc\u06a9 \u0641\u0627\u06cc\u0644 worker \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0631\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0628\u0627 stringify \u06a9\u0631\u062f\u0646 \u06a9\u0644 worker \u0648 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062d\u0628\u0627\u0628 \u0645\u0633\u062e\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n
\u0647\u0645\u0647 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u06af\u0630\u0627\u0634\u062a\u0646<\/p>\n
\u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u06a9\u062f \u0642\u0628\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u06a9\u0645\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 \u062a\u0627 \u0628\u0627 \u0622\u0646 \u062a\u0627\u0628\u0639 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u0648 \u06a9\u0627\u0631\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u0645. \u0645\u0627 \u062a\u0648\u0627\u0628\u0639 wrapper \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0642\u0628\u0644\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0627\u062e\u0644 \u0622\u0646 \u062a\u0627\u0628\u0639 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 (\u0686\u0648\u0646\u060c \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647\u060c \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0648\u0627\u0628\u0639 \u062f\u0627\u062e\u0644\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0628\u0647 \u0647\u0645 \u0645\u06cc \u062e\u0648\u0631\u062f) \u0648 \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u0642\u0628\u0644\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0627\u062f\u06cc\u0645\u060c \u0641\u0642\u0637 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0628\u0647 \u062c\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u067e\u06cc\u0627\u0645\u060c \u067e\u06cc\u0627\u0645 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645. \u062f\u0627\u062f\u0647 \u0647\u0627:<\/p>\n
const workerFunction = function () {<\/p>\n
function openDB(): Promise<IDBDatabase> {
\n …
\n }<\/p>\n
async function getDocumentStore(): Promise<IDBObjectStore> {
\n …
\n }<\/p>\n
self.onmessage = (event: MessageEvent) => {
\n console.log(“Received in worker thread:”, event.data);
\n if (event.data.type === ‘storeDocument’) {
\n console.log(“Storing document in worker thread”);
\n getDocumentStore().then((store) => {
\n store.add(event.data.data);
\n self.postMessage(true);
\n });
\n } else if (event.data.type === ‘getDocuments’) {
\n console.log(“Getting documents in worker thread”);
\n getDocumentStore().then((store) => {
\n const request = store.getAll();
\n request.onsuccess = (event) => {
\n self.postMessage((event.target as IDBRequest).result);
\n };
\n });
\n }
\n };
\n};<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0647\u0645\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc IndexedDB API \u0631\u0627 \u0628\u0647 worker \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0641\u0627\u06cc\u0644 \u0633\u0631\u0648\u06cc\u0633 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0635\u0644\u06cc \u0645\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u062e\u0627\u0644\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f:<\/p>\n
import { CroppedDetectionResult } from “..\/..\/core\/worker\/ScanbotSDK.Core”;
\nimport worker_script from ‘.\/worker\/sb-storage.worker’;<\/p>\n
export default class SBStorage {<\/p>\n
private static readonly worker: Worker = new Worker(worker_script);<\/p>\n
static async storeDocument(source: CroppedDetectionResult): Promise<boolean> {
\n this.worker.postMessage({ type: ‘storeDocument’, data: source });<\/p>\n
return new Promise<boolean>((resolve, reject) => {
\n this.worker.onmessage = (event) => {
\n resolve(true);
\n }
\n });
\n }<\/p>\n
static async getDocuments(): Promise<CroppedDetectionResult[]> {
\n this.worker.postMessage({ type: ‘getDocuments’ });
\n return new Promise<CroppedDetectionResult[]>((resolve, reject) => {
\n this.worker.onmessage = (event) => {
\n resolve(event.data);
\n }
\n });
\n }
\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u062a\u0646\u0647\u0627 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0628\u0627\u0642\u06cc \u0645\u06cc\u200c\u0645\u0627\u0646\u062f\u060c \u06a9\u062f\u06cc \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 blob\u060c \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u062e\u0648\u062f \u06a9\u0627\u0631\u06af\u0631\u060c \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0628\u0647 worker \u0648 \u062d\u0644 \u0642\u0648\u0644 \u067e\u0633 \u0627\u0632 \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u06cc\u0627\u0645.<\/p>\n
\u0648 \u0628\u0633! \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0628\u0627\u06cc\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u0648\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u0634\u063a\u0644\u0647 \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u062f. \u0646\u06a9\u062a\u0647 \u0627\u0648\u0644\u06cc\u0647: \u062a\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f \u0645\u0631\u062d\u0644\u0647\u060c \u0645\u0627 \u062e\u0648\u062f\u0645\u0627\u0646 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u0634\u06cc\u0627\u0621 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 – \u0641\u0642\u0637 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 IndexedDB \u0648 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u0648\u0628\u060c \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0634\u062e\u0635 \u062b\u0627\u0644\u062b.<\/p>\n