浅谈Web存储-前端面试问题

1. 什么是 HTML5 Web 存储?

web存储指的是在web通信过程中，由客户端（如浏览器）对少量数据进行的本地存储。
web存储类型有cookie和WebStorage,而WebStorage又分为sessionStorage和localStorage。

2. 存储类型

2.1 cookies存储

cookies存储的特点：

• 产生于服务器，保存在客户端
• 是面向服务器的，同一个服务器的cookie是共享的
• 不同服务器的cookie不共享，大小限制仅有4KB

//通过js来产生cookie，通常通过js-cookie库来操作cookie
<!-- 引入cookie库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
<script>
    //打印cookies
    console.log(Cookies,'打印cookies');
    // 创建一个cookie,设置cookie,7天后过期
    Cookies.set('name','larry',{expires:7});
    //获取cookie
    console.log(Cookies.get('name')); 
    // 移除cookie
    Cookies.remove('name')
</script>

2.2 sessionStorage会话存储

sessionStorage存储的特点：

• 针对于选项卡，当选项卡被关闭或浏览器关闭，会话结束，清除对应的sessionStorage
• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• 传输数据大小可达5M

// setItem(key,value)  getItem(key) 
// removeItem(key)  clear()

    //设置会话存储
    sessionStorage.setItem('gender','male')
    sessionStorage.setItem('weight','120kg')
    //获取会话存储
    console.log(sessionStorage.getItem('gender'));
    //清除会话存储（手动删除）
    sessionStorage.removeItem('name')
    //清除全部的会话存储（手动删除）
    sessionStorage.clear()

浏览器中查看：

把设置的会话存储内容注释掉还是可以看到图中数据，注意：不是手动删除！！！

2.3 localStorage本地存储

localStorage存储的特点：

• 数据存储在本地磁盘上
• 即使选项卡关闭或浏览器器关闭，数据依然存在
• 传输数据达到5M甚至更大
• 如果不清空存储内容（指手动删除），将一直占据本地磁盘内存

// setItem(key,value)  getItem(key) 
// removeItem(key)  clear()

    //设置本地存储
    localStorage.setItem('name','产品名称')
    localStorage.setItem('age','12')
    //获取存储内容
    console.log(localStorage.getItem('age'));
    //移除存储内容（手动删除）
    localStorage.removeItem('name')
    //清空所有的存储内容（手动删除）
    localStorage.clear()

浏览器中查看：

把设置的存储内容注释掉仍然可以看到图中数据，注意：不是手动删除！！！