cookie记录菜单位置

应用前提：由于项目采用的是tiles框架，刷新页面时会使得页面的整体刷新，包括菜单，这样就会使得用户的体验不好，因此需要采用cookie记录菜单状态，刷新页面后菜单仍然保存为菜单刷新前的状态，提升用户胡体验。下面是具体的实现：

使用cookie页面里面必须要引入cookie支持：

<script src="assets/vendor/jquery/jquery.js"></script>

<script src="assets/vendor/jquery-cookie/jquery-cookie.js"></script>

收缩菜单样式是采用bootstarp的基本样式来完成：

<div class="nano-content">
	<nav id="menu" class="nav-main" role="navigation">
		<ul class="nav nav-main">
			<li class="nav-parent menuli">
				<a class="expanded">
					<i class="fa fa-list" aria-hidden="true"></i>
					<span>区域管理</span>
				</a>
				<ul class="nav nav-children">
					<li>
						<a href="#">北京</a>
					</li>
				</ul>
			</li>
			<li class="nav-parent menuli">
				<a class="expanded">
					<i class="fa fa-file-text" aria-hidden="true"></i>
					<span>公告管理</span>
				</a>
				<ul class="nav nav-children">
					<li>
						<a href="#">公告展示</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
	<hr class="separator" />
</div>

记住cookie的js代码：

$(function(){

		//记录菜单状态
		$(".expanded").click(function(){
			//获取用于伸缩菜单的li的class
			var classCookie = $(this).parent().attr("class");
			//把li的class保存进cookie
			$.cookie("classCookie",classCookie);
			//获取状态改变的菜单的索引
			var index = $(".nav-main .menuli").find(".expanded").index(this);
			//保存状态改变菜单的索引
			$.cookie("indexClass",index);
		});
								
		//刷新页面执行的操作，判断是否有cookie
		if($.cookie("indexClass") != null && $.cookie("classCookie").indexOf("nav-expanded") == -1){
			var num = $.cookie("indexClass");
			//为li添加展开菜单的class
			$(".nav-main .menuli").eq(num).addClass("nav-expanded");
		}
})

其中expanded，nav-main，menuli是响应位置的class，如果想写改造自己的，就根据实际情况去改变，nav-expanded是我这里的展开菜单的class，这个位置也可以填写展开菜单样式的设置。（tip：最好是使用Firfox浏览器进行测试实现，Chrome对于记住cookie的支持好像不太好）

刷新前样式：刷新后样式：

至此，cookie保存菜单样式完成。