[iOS] WebView LocalStorage 사용하기.

이번에 회사에서 프로젝트 진행 중 webKit의 webView localStorage에 회원의 이름과 생년월일을 저장하고 이를 웹에서 보여주도록 하는 로직이 필요했다.
이번 노트에서는 iOS앱에서 webView를 통해 web의 localStorage에 데이터를 저장하는 방법을 기술하려 한다.

우선 사용법에 들어가기 앞서 web storage에 대해서 알아보자. web storage는 데이터를 서버가 아닌 클라이언트 레벨에 저장하는 기술을 말한다. web storage는 크게 session storage와 local storage로 나눌 수 있다. 두 storage 모두 데이터를 읽고, 쓰는 것은 동일하지만 차이점은 저장되는 범위로 나눌 수 있다.

session storage는 웹 페이지의 세션 마다 데이터가 저장된다. local storage의 경우 사용자가 직접 삭제하지 않는 한 브라우저 전체(크롬, safari 등)에 데이터가 저장된다. 즉, session storage는 브라우저의 여러 창(크롬, safari 내의 google, naver등 열린 페이지)으로 구분되어 데이터가 저장되고 해당 창이 닫히거나 끝나면 데이터는 삭제되고, local storage의 경우 브라우저의 전체의 복수의 창과 데이터를 공유하게 되며, 여러 창 중 하나가 닫히더라도 데이터는 삭제되지 않고(사용자가 삭제하지 않는 한) 유지된다.

그럼 iOS에서 local storage를 사용하여 webView에 데이터를 읽고 쓰는 방법에 대해 알아보자.

---

데이터 쓰기

local Stroage는 기본적으로 key-value의 형태로 값을 저장한다.
iOS webView에서 웹페이지로 script를 주입시키기 위해 WKUserScript를 사용한다. 이를 사용하기 위해 WebKit 패키지를 import한다.

import WebKit

웹 페이지 local storage에 저장할 데이터를 key-value의 형태로 만들어준다.
여기서 나는 user라는 key로 내부에 name과 birthday라는 key를 가진 user object를 만들었다.

let key: String = "user"
let value: [String: String] = [
	"birthday": "1996-11-15",
    "name": "모리스"
]

위의 value데이터를 JSON의 형태로 변환 후 WKUserScript를 사용해 webView의 local storage에 데이터를 저장한다.

if JSONSerialization.isValidJSONObject(value),
let data = try? JSONSerializtion.data(withJSONObject: value, options; []),
let jsonValue = String(data: data, encoding: .utf8) {
	let script = WKUserScript(
    	source: "window.localStorage.setItem('\(key)','\(jsonValue)');",
        injectionTime: .atDocumentStart,
        forMainFrameOnly: true
    )
    self.webView?.configuration.userContentController.addUserScript(script)
}

데이터 읽기

key-value의 형태로 데이터를 저장했기에 데이터를 읽을 땐 key를 이용한다.

self.webView?.evaluateJavaScript("window.localStorage.getItem('user');") { result, error in 
	if result != nil {
    	print("로컬 스토리지 값 불러옴.")
    }
}

데이터 삭제

마찬가지로 key-value로 값을 저장했기에 데이터 삭제 또한 key를 이용해 삭제 가능하다.

let script = WKUserScript(
	source: "window.localStorage.removeItem('user');",
    injectionTime: .atDocumentStart,
    forMainFrameOnly: true
)
self.webView?.configuration.userContentController.addUserScript(script)

2024년 화이팅~!~!!

참조

https://medium.com/@kawi.m/a-way-to-set-local-storage-on-wkwebview-e03258813024