移动端与pc端如何用localStorage实现历史纪录？
1.使用jq完成localStorage实现历史纪录版。
代码如下：
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title>历史记录</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
.history {
text-align: center;
} #sec {
width: 50%;
overflow: hidden;
text-align: left;
height: 38px;
border: 1px solid #ccc;
border-radius: 10px;
} .delete:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
} .delete>div {
border-radius: 50px;
float: left;
height: 23px;
border: 1px solid #ccc;
background: #E0E0E0;
margin-top: 14px;
margin-right: 10px;
overflow: hidden;
} #search {
width: 141px;
height: 37px;
font-size: 14px;
line-height: 14px;
color: #959595;
padding-bottom: 2px;
} #his-dele {
width: 22px;
height: 22px;
line-height: 22px;
display: inline-block;
background: #E0E0E0;
color: #fff;
border-radius: 50%;
text-align: center;
margin-left: 10px;
float: right;
position: relative;
top: -26px;
}
</style>
</head> <body>
<input class="" id="sec">
<!--搜索框-->
<button id="search">搜索</button> <!--历史记录-->
<div class="current">最近搜索</div>
<div class="delete history" style="width: 100%;float: left"></div> <!--删除按钮-->
<div class="history" id="his-dele">X</div> <!--无存储记录-->
<div class="Storage" style="width: 100px;height: 100px;margin: 0 auto;">无存储记录</div> <script src="../js/jquery-1.11.0.js"></script>
<script>
/*搜索记录相关*/ var hisTime; //获取搜索时间数组
var hisItem; //获取搜索内容数组
var firstKey; //获取最早的1个搜索时间 function init() { hisTime = []; //时间数组置空
hisItem = []; //内容数组置空 for(var i = 0; i < localStorage.length; i++) { //数据去重
if(!isNaN(localStorage.key(i))) { //判断数据是否合法
hisTime.push(localStorage.key(i));
}
} if(hisTime.length > 0) {
hisTime.sort(); //排序
for(var y = 0; y < hisTime.length; y++) {
localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y]));
}
}
console.log(hisTime);
console.log(hisItem);
$(".delete").html(""); //执行init(),每次清空之前添加的节点
$(".Storage").show();
for(var i = 0; i < hisItem.length; i++) { $(".delete").prepend('<div class="word-break">' + hisItem[i] + '</div>');
if(hisItem[i] != '') {
$(".Storage").hide();
}
} } init(); //调用 $("#search").click(function() {
var value = $("#sec").val();
var time = (new Date()).getTime(); if(!value) {
alert("你未输入搜索内容");
return false;
}
//输入的内容localStorage有记录 if($.inArray(value, hisItem) >= 0) { for(var j = 0; j < localStorage.length; j++) {
if(value == localStorage.getItem(localStorage.key(j))) {
localStorage.removeItem(localStorage.key(j));
}
}
localStorage.setItem(time, value); } else {
localStorage.setItem(time, value);
}
init(); }); //清除记录功能
$("#his-dele").click(function() {
var f = 0;
for(; f < hisTime.length; f++) {
localStorage.removeItem(hisTime[f]);
}
init();
}); //苹果手机不兼容出现input无法取值以下是解决方法 $(".delete").on("click", ".word-break", function() {
var div = $(this).text();
$('#sec').val(div);
});
</script>
</body> </html>
2.在react的框架中如何实现？
JS代码如下：
jsinarray(value,hisItem){
const { organsearchhisTime = {} } = this.state;
const { hisTime = [] } = organsearchhisTime;
const time = (new Date()).getTime()+'';
let firstKey = null;
if(hisItem != ''){
console.log(111);
for( var k in hisItem){
if( hisItem[k] == value ){
for(let j = 0; j < localStorage.length; j++) {
if(value == localStorage.getItem(localStorage.key(j))) {
localStorage.removeItem(localStorage.key(j));
}
}
console.log('time:'+hisItem);
console.log('value:'+value);
localStorage.setItem(time, value);
}
//清除第一条数（据限制数据为十条）
if(k == hisItem.length-1){
if(hisItem.length > 9){
firstKey = hisTime[hisTime.length-1];
localStorage.removeItem(firstKey);
localStorage.setItem(time, value);
}else{
localStorage.setItem(time, value);
}
}
}
}else{
console.log(222);
localStorage.setItem(time, value);
}
this.init();
}
//历史纪录
init() {
let { hisTime, hisItem, organsearchhisTime = {}, organsearchhisItem = {} } = this.state;
hisTime = [];
hisItem = [];
console.log(localStorage)
for(let i = 0; i < localStorage.length; i++) { //数据去重
if(!isNaN(localStorage.key(i))) { //判断数据是否合法
hisTime.push(localStorage.key(i));
}
}
if(hisTime.length > 0) {
hisTime.sort(); //排序
for(let y = 0; y < hisTime.length; y++) {
localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y]));
}
}
//将数组反序
hisTime = hisTime.reverse();
hisItem = hisItem.reverse();
console.log("hisTime:"+hisTime);
console.log(".reverse():"+hisItem);
this.setState({
organsearchhisTime: {hisTime},
organsearchhisItem: {hisItem},
});
}
//清除记录
removeItemhisTime(){
let f = 0;
const { organsearchhisTime = {} } = this.state;
const { hisTime = [] } = organsearchhisTime;
for(; f < hisTime.length; f++) {
localStorage.removeItem(hisTime[f]);
}
this.init();
}
注意：以上代码所存localStorage数据是将一次搜索的文案存为一条localStorage，后续如再有localStorage数据将需要存储，那么就不能用以上的数据格式存储，同时，将会照成大量的localStorage数据，同时给用户带来较多的存储量。
优化：将一个地方使用的localStorage存储数据存在一条localStorage中，不与其他地方localStorage数据冲突，同时减少localStorage的存储数量。
代码如下：
//是否有一样的
jsinarray(value,hisItem){
const { organsearchhisTime = {} } = this.state;
const time = (new Date()).getTime()+'';
let firstKey = null;
let arrayList= JSON.parse(localStorage.getItem("historylist"))||[];
// console.log(arrayList)
//输入的内容localStorage有记录
let obj={'name':value}
if(arrayList.length>0){
for( let k in arrayList){
if(arrayList[k].name==value){
arrayList.splice(k,1);
}
}
if(arrayList.length>9){
arrayList.pop();
arrayList.unshift(obj);
}else{
arrayList.unshift(obj);
}
}else{
arrayList.push(obj);
}
localStorage.setItem('historylist', JSON.stringify(arrayList));
this.init();
} //历史纪录
init() {
let { hisItem, organsearchhisTime = {}, organsearchhisItem = {} } = this.state;
hisItem = [];
console.log(localStorage);
hisItem = localStorage.getItem('historylist');
hisItem = JSON.parse(hisItem);
console.log(hisItem);
// console.log(students);
if(hisItem == null){
hisItem = "";
this.setState({
organsearchhisItem: {hisItem},
});
}else{
this.setState({
organsearchhisItem: {hisItem: hisItem.map((historylist) => { return historylist.name })},
});
}
} //清除记录
removeItemhisTime(){
localStorage.removeItem("historylist");
this.init();
}
以上优化的是react中使用的 localStorage 方法，jq版原理也是一样的，我这就不一一做优化了。
移动端与pc端如何用localStorage实现历史纪录？的更多相关文章
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- js判断游览器是移动端还是PC端
js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...
- 检测当前运行环境——移动端与PC端。
方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...
- js判断是移动端还是pc端
运行页面的时候,执行到js会判断来自于移动端还是pc端,如果是移动端则跳转制定链接地址,这样在手机端会有额外的不必要浪费的加载时间 var browser={ versions:function(){ ...
- 关于移动端和PC端的交互的区别
对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...
- html与css的移动端与pc端需要注意的事项
一个移动端与pc端之间最主要的也就是尺寸问题,苹果与安卓的机型尺寸大小相差甚多,一个尺寸都会影响用户的体验.那么我们来了解一下一些常用的解决方法. 一般在网页中都会在头部有一些这样的代码 <me ...
- C# 移动端与PC端的数据交互
小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务 ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
随机推荐
- linux命令技巧
printf "%-5s %-10s %-4s\n" No Name Mark printf "%-5s %-10s %-4.2f\n" 1 Sarath 80 ...
- c#拷贝整个文件夹到指定文件夹下(非递归)
public static void CopyEntireDir(string sourcePath, string destPath) { //Now Create all of the direc ...
- Sublime Text 3 使用心得
1.Ctrl + Shift + P : package control install package == > ConvertToUTF82.列模式: 苹果:OS X -鼠标左键+Optio ...
- 第二单元电梯调度作业 By Wazaki
figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...
- Python解析Xmind工具
使用Xmind写用例 使用Python解析Xmind,统计用例个数 代码: from xmindparser import xmind_to_dict import tkinter as tk fro ...
- 2018-2019-2 网络对抗技术 20165336 Exp1 PC平台逆向破解
2018-2019-2 网络对抗技术 20165336 Exp1 PC平台逆向破解 1. 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常 ...
- python摸爬滚打之day28----黏包处理
1.缓冲区和subprocess模块 1.1 缓冲区( 当send()内容超过输入缓冲区大小或recv()接收内容超过输出缓冲区大小时旧版本(py3.5以前)是会直接报错的, py3.5以后如果出错 ...
- vue项目打包之后js文件过大怎么办？
- EM(Expectation Maximization )
概括 看李航老师的<统计学习方法>知道,EM是一个对于有隐含随机变量的概率模型的参数的估计方法,它是一种无监督的算法. 只是有些重要的点并没有给出, 比如没有三硬币例子中直接给出的 u(z ...
- redis集群及相关的使用
从redis 3.0之后版本支持redis-cluster集群,Redis-Cluster采用无中心结构,每个节点保存数据和整个集群状态,每个节点都和其他所有节点连接. 1.所有的redis节点彼此互 ...