20-js本地存储

js本地存储

localStorage

localStorage是window下的对象,可以使用window.localStorage调用,也可以直接使用localStorage调用。

浏览器关闭,localStorage也不会消失

示例:

<body>
    <h2>localStorageh2>
    <button onclick="saveData()">点我保存一个数据button>
    <button onclick="readData()">读取数据button>
    <button onclick="deleteData()">删除数据button>
    <button onclick="clearData()">清空数据button>
    <script>
        function saveData() {
            // 参数1:key,参数2:value
            // key、value都需要是字符串
            // localStorage.setItem('msg', 'hello')

            let person = {name: '张三', age:18}
            localStorage.setItem('person', JSON.stringify(person));
        }

        function readData() {
            let result = localStorage.getItem('person')
            console.log(JSON.parse(result))
        }

        function deleteData() {
            localStorage.removeItem('person');
        }

        function clearData() {
            localStorage.clear();
        }
    script>
body>

sessionStorage

用法和localStorage完全一样。

浏览器关闭后,sessionStorage会消失

<body>
    <h2>sessionStorageh2>
    <button onclick="saveData()">点我保存一个数据button>
    <button onclick="readData()">读取数据button>
    <button onclick="deleteData()">删除数据button>
    <button onclick="clearData()">清空数据button>
    <script>
        function saveData() {
            // 参数1:key,参数2:value
            // key、value都需要是字符串
            // sessionStorage.setItem('msg', 'hello')

            let person = {name: '张三', age:18}
            sessionStorage.setItem('person', JSON.stringify(person));
        }

        function readData() {
            let result = sessionStorage.getItem('person')
            console.log(JSON.parse(result))
        }

        function deleteData() {
            sessionStorage.removeItem('person');
        }

        function clearData() {
            sessionStorage.clear();
        }
    script>
body>

总结

localStorage、sessionStorage统称为webStorage。

存储内容大小一般支持5MB左右(和浏览器有关)。

浏览器通过Window.sessionStorageWindow.localStorage属性实现本地存储机制。

相关API:

  1. xxxStorage.setItem('key', 'value'):该方法接收一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
  2. xxxStorage.getItem('person'):该方法接收一个键名作为参数,返回键名对应的值
  3. xxxStorage.removeItem('key'):该方法接收一个键名作为参数,并把该键名从存储中删除
  4. xxxStorage.clear():该方法会清空存储中的所有数据

sessionStorage存储的内容会随着浏览器窗口关闭而消失。

localStorage存储的内容,需要手动清除才会消失(调用相关API、手工清空浏览器的缓存)。

xxxStorage.getItem(xxx)如果键名对应的value获取不到,那么返回值是null。

JSON.parse(null)的结果也是null

使用本地存储来保存vue中的数据

示例:


先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!

你可能感兴趣的:(Vue学习,javascript,前端,开发语言)