初识localStorage&localStorage的注意事项

初识localStorage

　1.localStorage是什么

　　　　　　　　localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端

　　　　　　　　单个域名下的localStorage总大小有限制 

　 2.在浏览器中操作localStorage

　3.localStorage的基本用法

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>初始localStorage</title>
    </head>
    <body>
       <script>
            //console.log(localStorage)
            
            //setItem（）存储数据
            localStorage.setItem('username','lyw');
            localStorage.setItem('username','yth');
            localStorage.setItem('age',18);
            localStorage.setItem('sex','nv');
            
            //length
            //console.log(localStorage.length)
            
            //getItem
            /* console.log(localStorage.getItem('username'));
            console.log(localStorage.getItem('age'));
            console.log(localStorage.getItem('sex')); */
            
            //获取不存在的返回null
            console.log(localStorage.getItem('name'));
            //console.log(localStorage);
                
            
            //removeItem
            /* localStorage.removeItem('username');
            localStorage.removeItem('age');    
            //删除不存在的key，不报错
            localStorage.removeItem('name');     */
            
            //clear（）
            localStorage.clear();      
                
            

            console.log(localStorage)                
       </script>
    </body>
</html>

　　

localStorage实现自动填充

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>初始localStorage</title>
    </head>
    <body>
       <script>
            //console.log(localStorage)
            
            //setItem（）存储数据
            localStorage.setItem('username','lyw');
            localStorage.setItem('username','yth');
            localStorage.setItem('age',18);
            localStorage.setItem('sex','nv');
            
            //length
            //console.log(localStorage.length)
            
            //getItem
            /* console.log(localStorage.getItem('username'));
            console.log(localStorage.getItem('age'));
            console.log(localStorage.getItem('sex')); */
            
            //获取不存在的返回null
            console.log(localStorage.getItem('name'));
            //console.log(localStorage);
                
            
            //removeItem
            /* localStorage.removeItem('username');
            localStorage.removeItem('age');    
            //删除不存在的key，不报错
            localStorage.removeItem('name');     */
            
            //clear（）
            localStorage.clear();      
                
            

            console.log(localStorage)                
       </script>
    </body>
</html>

 

 

localStorage的注意事项

 

1.localStorage的存储期限

　　localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据是永远不会过期的

 

sessionStorage（用法和localStorage一样只不过sessionStorage是会话存储）

　　当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空

 

2.localStorage 键和值的类型

　　localStorage存储的是键和值只能是字符串类型

　　不是字符串类型，也会转化成字符串类型再存进去

 

3.不同域名下能否共用localStorage

　　不同域名是不能共用localStorage的

 

4.localStorage的兼容性

　　IE7及以下版本不支持localStorage，IE8 开始支持　　

posted @ 2023-03-28 11:33  漁夫  阅读(30)  评论(0)    收藏  举报