HTML5 WEB缓存之localStorage与sessionStorage初体验

不念不忘少年蓝@ 2022-03-16 11:12 237阅读 0赞

今天一个同学问了我关于利用js在不同html页面传递信息的方法，说是用url传递不安全，刚开始我也不是很懂，之后在网上查找了一些方法，偶然间发现了HTML5缓存的方法，在这里与大家分享一下。

这里查阅了这两个方法的兼容性，参考https://blog.csdn.net/cheogo/article/details/50590401

另外我参考的API  
[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage][https_developer.mozilla.org_zh-CN_docs_Web_API_Window_localStorage]

首先先说明一下`localStorage`与`sessionStorage`虽然同为本地缓存，但是却有着些许区别，`localStorage`的缓存可以在不同界面之间交互，而`sessionStorage`只能在单个网页缓存，这里为了更好地理解，直接上图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpeWluaW5n_size_16_color_FFFFFF_t_70]上图是CSDN官网

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpeWluaW5n_size_16_color_FFFFFF_t_70 1]上图为百度

**关于方法：**

**1.先设置缓存**

localStorage.setItem('myCat', 'Tom');

**2.读取该缓存**

localStorage.getItem('myCat');

**3.移除该缓存**

localStorage.removeItem('myCat');

**4.移除所有缓存**

localStorage.clear();

`sessionStorage`方法同上。

后续应该会补上关于cookie缓存与这两个缓存的区别吧 咕咕咕

[https_developer.mozilla.org_zh-CN_docs_Web_API_Window_localStorage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpeWluaW5n_size_16_color_FFFFFF_t_70]: /images/20220316/b3bda53fd16e409ba4692b8ddc6a72eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpeWluaW5n_size_16_color_FFFFFF_t_70 1]: /images/20220316/7309d34cc329444ea5088fba7d4c62a2.png