vue的localStorage本地缓存和sessionStorage临时缓存

localStorage和sessionStorage

  • vue的localStorage本地缓存
  • sessionStorage临时缓存
  • 总结
    • webStorage和sessionStorage

vue的localStorage本地缓存

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStoragetitle>
head>

<body>
    <h1>localStorageh1>
    <button onclick="fun()">点击我存储一个数据button><br>
    <button onclick="disPlay()">点击我查看一个存储信息button>
    <button onclick="selete()">点击我删除一个存储的信息button>
    <script>
        let a = { name: "勇敢", mes: 123 }
        function fun() {
            window.localStorage.setItem('message', '勇敢牛牛');
            //对象解析Wie字符串
            window.localStorage.setItem('message_2', JSON.stringify(a))
        }
        function disPlay() {
            console.log(window.localStorage.getItem('message'));
            var result = window.localStorage.getItem('message_2');
			//将一个字符串解析为对象
            console.log(JSON.parse(result));
        }
        function selete() {
            window.localStorage.removeItem('message');
        }
    script>
body>

html>

sessionStorage临时缓存

缓存的数据跟随浏览器的页面关闭而清空。

总结

webStorage和sessionStorage

  1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API:

    1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数,返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数,并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

  4. 备注:

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容,需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。
      vue的localStorage本地缓存和sessionStorage临时缓存_第1张图片

你可能感兴趣的:(Vuejs,vue)