关于js操作cookie问题

业务需求：在一个商品列表中通过选取按钮选择商品，选中后按钮变成已选中状态，再次点击变回初始状态并且可以再次选取，在选取过程中可以通过搜索筛选

因为页面没有复选框，所以我只能通过js的方式将选取过的商品Id存放起来。刚开始我想到的是js数组，不过立马就被我否决了，因为列表数据是使用控件绑定的，每次搜索都需要刷新页面重新绑定，这样会清空数组。当然，我在百度看到好像有可以控件局部刷新数据的方式，不过没做深究，我也没去看，想了解的朋友可自行百度。回到主题，之后同事跟我讲可以用cookie或session保存。说到这提一下，本人是个刚工作一年的菜鸡，以前考上大专没去读，去了一个培训机构出来的，学得稀烂，不过还是找到了一份工作。所以很多东西都不懂，不过工作之后自己也意识到技术太渣，现在也是每天在努力学习中。对于cookie和session这东西都是神交已久却从未接触过的东西。不过本人对自己唯一满意的一点就是学习能力，O(∩_∩)O哈哈~。cookie的用法其实很简单，语法就在那里，看过的人都能懂，我一开始用后端的cookie存储，写完就煞笔了，每次点击我还要异步把商品Id加入到后台cookie中，这样请求太频繁了。不过都说爱笑的人运气不会太差，可能是因为我长得帅的原因吧，看百度的时候发现了js竟然也有cookie设置（原谅我是个小白，我保证以后好好学习O(∩_∩)O），当时就心里一激动，这样在页面上存取cookie，就不用每次去后台交互啦。然后就开始了我的复制粘贴过程（其实都是我看完源码理解后一个个敲出来滴），下面贴出js操作cookie的方法

var cookie = {
            //设置cookie
            setCookie: function (cname, cvalue, exdays) {
                
                document.cookie = cname + "=" + cvalue + ";";
            },
            //获取cookie
            getCookie: function (cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            },
            //删除cookie
            delCookie: function (cname) {
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var value = this.getCookie(cname);
                if (cookie != "") {
                    document.cookie = cname + "=" + value + ";expires=" + exp.toGMTString();
                }
            }
        }

在设置cookie的时候可以设置超时时间，我这里删掉了没加。删除cookie其实就是设置时间超时就行了。

我最后的代码里没有使用上面的方法，因为我在使用cookie的时候又发现了一个超级坑的问题，那就是cookie是持久化保存（在过期时间内），就算我将页面和浏览器都关闭了，再次打开cookie数据还在。这样导致我在选取商品后关闭页面或浏览器，重新打开页面商品还是已选取的状态，而我需要的是只要页面没有关闭，再怎么刷新都没问题，但是只要页面一关闭我是不需要保存数据的。于是我又开始蛋疼的找关闭页面清除cookie的方式。终于在cookie虐我千百遍，我仍待它如初恋的惨痛折磨之后 ——你们可能猜错了，我还是没找到解决办法。网上很多说不设置过期时间会在页面关闭时就清空cookie，我试过了，没啥用。终于当我想起问我的前端同事这时候该如何操作一波的时候，我旁边大佬（上文同事）来了一句，你用session试一下。然后我又开始我的面向百度编程的经历。终于，还是被我找到了解决方案，原来在web存储中还有两个对象——localStorage与sessionStorage。W3C当中有一段这两个对象的概述：

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

看完后心里一痛，为啥没有早点找到你，没错，就是你啦——sessionStorage 。百度了下sessionStorage 对象，这个是HTML5添加的一个会话存储对象（具体是个啥我也不懂），可以用来存储当前页面的一些临时数据，当页面关闭即删除数据

关于sessionStorage 对象的操作就简单的多，因为有封装好的对象和方法，操作方法跟上面封装的操作cookie的方法差不多。

这是我的第一篇博客，写的都是很简单的东西，主要适用于自己记录学习，大神勿喷。如果当中有错误，欢迎指正

关于js操作cookie问题

猜你喜欢