Just My Life & My Work

[iOS] WebView Local Storage

為了快速開發功能,有時候會鑲嵌 WebView。此時,我想要讓 App 與 Web 登入狀態一致,需要了解當我在 App 登入拿到的資料,要如何與 WebView 共享?🤔

上圖是 Chrome 開發人員工具的畫面截圖,得知有 MEMBER 與 TOKEN 兩個 key。

因為 WebView 是將資料儲存於本機端,於是我就得研究 WebView Local Storage,如何在 WebView 設定資料和取得資料。

接下來,我們直接看程式碼:

// Theme: WebView Local Storage
// Language: Objective C
// IDE: Xcode 13.3.1
// OS: iOS 15
// Date: 2022-05-10
// Author: HappyMan

-(void)injectData
{
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    NSString *login_data = [defaults objectForKey:@"login_data"];
    NSString *login_token = [defaults objectForKey:@"login_token"];

    // 設置 Local Storage
    NSString *dataString = [NSString stringWithFormat:@"localStorage.setItem('MEMBER', '%@')", login_data];
    [self.webView evaluateJavaScript:dataString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        NSLog(@"dataString: %@", data);
        
        NSString *tokenString = [NSString stringWithFormat:@"localStorage.setItem('TOKEN', '%@')", login_token];
        [self.webView evaluateJavaScript:tokenString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
            NSLog(@"tokenString: %@", data);
            
            NSString *urlString = Strategy_HOST;

            NSURL *url = [NSURL URLWithString:urlString];
            NSURLRequest *request = [NSURLRequest requestWithURL:url];

            [self.webView loadRequest:request];
        }];
    }];
    
    // 取得 Local Storage
    NSString *getDataString = [NSString stringWithFormat:@"localStorage.getItem('MEMBER')"];
    [self.webView evaluateJavaScript:getDataString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        NSLog(@"getDataString: %@", data);
        
        NSString *getTokenString = [NSString stringWithFormat:@"localStorage.getItem('TOKEN')"];
        [self.webView evaluateJavaScript:getTokenString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
            NSLog(@"getTokenString: %@", data);
        }];
    }];
}

上述程式碼是執行 Javascript 一小段程式碼,將資料寫入 Local Storage 和 讀取 Local Storage。

其實可以做到兩邊互通,也就是:

  • 從 App 登入,再與 Web 共享登入資料
  • 從 Web 登入,再與 App 共享登入資料

但我為了使用者體驗良好,便強制從 App 登入。若用戶點擊 Web(若尚未登入,預設是登入畫面),會跳轉至 App 登入畫面,再回來 Web 功能畫面,就會是登入狀態顯示。

話說,原本我想透過 Cookie 或 Session 來做到⋯⋯😗

參考:

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: