이번에 회사에서 프로젝트 진행 중 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