आपको ब्राउज़र में कुछ सहेजना है। localStorage, sessionStorage, cookies और IndexedDB में से कैसे चुनते हैं?

cookies सिर्फ तब इस्तेमाल करें जब सर्वर को हर request पर वह value चाहिए, और संवेदनशील किसी भी चीज़ पर HttpOnly, Secure और SameSite लगाएं। जो state tab के साथ ही खत्म हो जानी चाहिए उसके लिए sessionStorage, restart के बाद भी बची रहने वाली छोटी synchronous key value डेटा के लिए localStorage, और बड़ी, structured या asynchronous चीज़ों के लिए IndexedDB। tokens या निजी डेटा कभी localStorage में न रखें, क्योंकि पेज पर मौजूद कोई भी script उसे पढ़ सकती है।

मेरा पहला सवाल यह है कि सर्वर को इसकी ज़रूरत है या नहीं। अगर है तो यह cookie है, और उस पर HttpOnly, Secure और SameSite लगते हैं, जिसका मतलब यह भी है कि मेरा JavaScript उसे पढ़ता ही नहीं। अगर सिर्फ client को चाहिए तो बात उम्र और आकार पर आ जाती है। tab तक सीमित चीज़ों के लिए sessionStorage, जैसे wizard का कदम या ऐसी scroll position जिसे मैं दूसरे tab में नहीं ले जाना चाहता। छोटी टिकाऊ पसंदों के लिए localStorage, theme, आखिरी इस्तेमाल किया गया filter, वैसी चीज़ें, और मैं उसे छोटा रखता हूं क्योंकि वह synchronous है, तो startup पर parse होने वाला बड़ा JSON सीधे मेरे time to interactive में दिखता है। डेटा बड़ा या structured हो जाए तो IndexedDB, मसलन offline इस्तेमाल के लिए records की cached list, आमतौर पर किसी छोटे wrapper के पीछे क्योंकि कच्चा API सुखद नहीं है। जो नियम मैं नहीं तोड़ता वह यह कि access tokens localStorage में नहीं जाते, क्योंकि कोई भी injected script उन्हें पढ़ सकती है; वे HttpOnly cookie में या सिर्फ memory में रहते हैं।