JavaScript本地储存:localStorage、sessionStorage、cookie的使用

最新推荐文章于 2024-05-08 13:15:46 发布

x² （y²－x²）²＝1

最新推荐文章于 2024-05-08 13:15:46 发布

阅读量199

点赞数 1

分类专栏： javascript 文章标签： web js javascript

本文链接：https://blog.csdn.net/smx19980410/article/details/118160797

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript本地储存:localStorage、sessionStorage、cookie的使用

javaScript有三种数据存储方式，分别是：

1. sessionStorage

2. localStorage

3. cookier**

1.sessionStorage

sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除；
setItem(key,value) 设置数据
getItem(key) 获取数据
removeItem(key) 移除数据
clear() 清除所有值

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 当我们点击了之后，清除所有的
            sessionStorage.clear();

        });
    </script>
</body>

2.localStorage
localStorage是HTML5标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除； localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信；

setItem(key,value) 设置数据
getItem(key) 获取数据
removeItem(key) 移除数据
clear() 清除所有值

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>
</body>

3.cookier

简介
Cookie是一些数据,存储于你电脑上的文本文件中，用于存储web页面的用户信息
Cookie数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookie
Cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
Cookie内存大小受限，一般每个域名下是4K左右，每个域名大概能存储50个键值对
基本操作
通过访问document.cookie可以对cookie进行创建，修改与获取。
默认情况下，cookie在浏览器关闭时删除，你还可以为cookie的某个键值对添加一个过期时间
如果设置新的cookie时，某个key已经存在，则会更新这个key对应的值，否则他们会同时存在cookie中

        //设置cookie 
        document.cookie = "username=orochiz";
        document.cookie = "age=20";
        //读取cookie 
        var msg = document.cookie
        console.log(msg) //username=orochiz;age=20 

        //添加过期时间（单位：天） 
        var date = new Date();
        //当前时间2019-9-25 
        var days = 3 //3天
        date.setDate(d.getDate() + days)
        document.cookie = "username=orochiz;" + "expires=" + date;
        //删除cookie（给某个键值对设置过期的时间） 
        date.setDate(date.getDate() - 1)
        console.log(document.cookie)

<script>
			/*
			  设置 cookie 
			  直接写 document.cookie = "key=value"设置一条cookie
			  一次只能设置一条 cookie 
			  默认的过期时间 是 session 
			  如果需要设置过期时间，直接在本条 cookie 后面添加一个 expires 
			  过期时间的值 是一个时间对象
			  如果传递当前时间，就是会话级别 
			  如果传递的是未来时间，会在将来的某一个时间过期
			*/
		   // document.cookie = "a=100";
		   // console.log(document.cookie)
		   // 时间对象
		   var time = new Date();
		   console.log(time,'000')
		   // 设置 过期时间
		   //document.cookie = "a=100;expires="+time;
		   console.log(time.getTime(),'70年到现在的时间戳')
		   // 匹配 cookie 的时间
		   console.log(time.getTime()-1000*60*60*8);
		   time.setTime(time.getTime()-1000*60*60*8+1000*5);
		   console.log(time,'设置后的时间')
		   document.cookie = "a=100;expires="+time;
		</script>

总结

**相同点：**都保存在浏览器端，可以下图位置查看储存的信息

不同点：

①传递方式不同

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

②数据大小不同

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

③数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

④作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

WebStorage支持事件通知机制，可以将数据更新的通知发送给监听者。

WebStorage的api接口使用更方便。

x² （y²－x²）²＝1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript本地储存:localStorage、sessionStorage、cookie的使用

JavaScript本地储存:localStorage、sessionStorage、cookie的使用JAVASCRIPTjavaScript有三种数据存储方式，分别是：sessionStorage localStorage cookier1.sessionStoragesessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除；setItem(key,value) 设置数据getItem(key) 获取数据removeItem(key) 移除数据clear()
复制链接

扫一扫