localstorage 和sessionstorage的使用

最新推荐文章于 2022-08-03 22:21:12 发布

猎剑

最新推荐文章于 2022-08-03 22:21:12 发布

阅读量209

点赞数

文章标签：前端开发

本文链接：https://blog.youkuaiyun.com/weixin_42393089/article/details/99335713

版权

localstorage 与sessionstorage的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>storage的使用</title>
</head>
<body>
    <pre>
        <h1>storage的使用：localstorage 、sessionstorage</h1>
        localStorage:是为了解决cookie存储空间不足来解决的，一般浏览器存储空间大小为5M,在各个浏览器中可能不同
        localStorage的优势：
         1.突破了cookie 4k的限制,
         2. localStorage可以将第一次请求的数据存储到本地，这个5K存储在本地相当于本地的一个数据库，相比cookie可以节约存储
         localStorage的缺点：
         1.浏览器支持性不好，只有高版本浏览器支持
         2.localStorage会把本地存储的所有的数据都转换为string型
         3.localStorage在浏览器的隐藏模式是不显示的
         4.localStorage存储过多容易消耗空间
         5.localstorage 不会被爬虫抓到
         localStorage 与sessionstorage的区别：
         localStorage能永久本地化存储，sessionstorage会在会话结束消失。
         localStorage的增删改查
    
         ~~~JavaScript
         //增：
         localStorage['username'] = 'ghost'
         localStorage['passworld'] = 1223123,
         localStorage.tel = 138888888888,
         localStorage.setItem('email', 'ghostdot@163.com')
        // 删：
        localStorage.clear() //删除所有内容
        // 改：
        localStorage['username'] = 'ghost1'
         localStorage['passworld'] = 91223123,
         localStorage.tel = 138111111111118,
         localStorage.setItem('email', 'ghostdot@163.com')
         //查：
         localStorage['username'] 
         localStorage['passworld']
         localStorage.tel
         localStorage.getItem('username')
         ~~~
        localStorage 的注意事项：
         1.一般情况下我们会将json传入到localStorage中，但是localStorage存储的String对象，这时候就需要通过JSON.Stringfy这个方法来实现
         2.将Json字符串转换为json对象，通过JSON.Parse
        </pre>
         


     
    <script>
        console.log(localStorage)
        console.log(sessionStorage)
        localStorage['username'] = 'ghost'
        localStorage['passworld'] = 1223123,
        localStorage.tel = 138888888888,
        localStorage.setItem('email', 'ghostdot@163.com')
        console.log(localStorage.username)
        console.log(typeof(localStorage.passworld)) //string
        localStorage.removeItem('username') //删除username
        // localStorage.clear() //删除所有内容
        localStorage.getItem('username')
        for(var i=0;i<localStorage.length;i++){
                var key=localStorage.key(i);
                console.log(key); //localstorage 存储默认有一个key值从0开始
            }
            var data = {
                   car:'BMW',
                   color:"red",
                   wheel: 4,
                   seat:8

            }
            var j = JSON.stringify(data)
            console.log(j)
            localStorage.setItem('data', j) //key:data value:json对象
            var mydataString = localStorage.getItem('data')
             console.log("data:"+mydataString)
            var mydata = JSON.parse(mydataString)
            console.log(mydata)
    </script>

</body>
</html>