Архив метки: javascript

WEB

Удаляем кукисы, время жизни которых более заданного

Комментариев нет

Задача: есть сайт, на котором кукисы устанавливаются движком. Где не известно. Настроек нет (или есть, но лень-не кому копаться). Необходимо принудительно сократить время жизни куков до заданного.

Решение:

Из сложных нюансов: браузер не позволяет читать время истечения жизни (и путь) установленных кукисов. От слова никак и вообще. Защита такая..

Ну если с путем всё в принципе не так важно — просто вставлять код трущий кукисы на КАЖДОЙ странице, а не только на «начальной», то кукисы прочитаются, то со временем жизни возможен только «хук».  А именно: читаем все куки. Записываем все ключи куков в локасторадж браузера с датой истечения сегодня+(какое-то количество дней). При следующем открытии страницы — проверяем дату истечения в сторадже. Если меньше текущей — трем кукисы.

Код:

dayssavecookies=7;    
function deleteLCookie(name) {
    document.cookie.split(";").forEach(function(el) {
        if(!el.indexOf(name)) {
	    var date = new Date(0);
            document.cookie = el + "=; path=/; expires=" + date.toUTCString();
	   }
	});
}    
function getAllCookies(){
  var pairs = document.cookie.split(";");
  var cookies = {};
  for (var i=0; i<pairs.length; i++){
    var pair = pairs[i].split("=");
    cookies[(pair[0]+'').trim()] = unescape(pair.slice(1).join('='));
  }
  return cookies;
}    
// получаю текущие куки браузера
cooks_values=getAllCookies();
// получаю текущие сохраненные в сторадже куки - даты
  if (localStorage["cooks_dates"]==undefined){
      ls_dates=new Map();
  } else {
    ls_dates=JSON.parse(localStorage["cooks_dates"]) 
  };
// если кука в сторадже нет, то добавляю, если истек - ту удаляю и из стораджа и из куков
for (key in cooks_values) {
    console.log(key);
    console.log(cooks_values[key]);
    // если новый кук - добавляем
    if (ls_dates[key]==undefined){
        console.log("--add to localstorage");
        datec = new Date(Date.now() + 86400e3*dayssavecookies);        
        ls_dates[key]=datec;
    };
   // если кук истек в локальном хранилище - трём его в куках и в локальном хранилище 
   if (new Date(ls_dates[key])<Date.now()){
      delete(ls_dates[key]); 
      deleteLCookie(key);
   };    
}    
localStorage.setItem("cooks_dates", JSON.stringify(ls_dates));
WEB

Копирование объектов в Javascript

Комментариев нет

В Javascript лично мне немножко не привычное поведение при присвоении одного объекта другому. Например:

otvet_4={        
        start_button : 1,
        concurent : 22
}

qwest=otvet_4;
qwest.start_button=10;

console.log(qwest.start_button);
console.log(otvet_4.start_button);

Выведет на экран две цифры 10. Т.е. меняется и первоначальный обьект?? Фактически значит знаком =, создается не копия, а ссылка на объект.

Одним из методов позволяющих «истинно копировать», является применение например такого трюка:

otvet_4={
 start_button : 1,
 concurent : 22
}

qwest=JSON.parse(JSON.stringify(otvet_4));
qwest.start_button=10;

console.log(qwest.start_button);
console.log(otvet_4.start_button);

В этом случае в консоль выведет 1 и 10, что и ожидали.. Так-же можно воспользоваться функцией Object.assign… Но тут есть тоже подводные камни. Хороший материал по копированию объектов в Javascript тут

WEB

Функция «посмотреть пароль» на сайте

Комментариев нет

Иногда бывает полезно раскрыть «звездочки» в теле тэга input при типе равном password. Вообще javascript не позволяет заменять тип «на лету» (например на text), но! как всегда это ограничение можно достаточно просто обойти — просто удалим обьект input и заменим его другим. Например как-то так:

           <div id="input_pass_div">
                <input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">
            </div>
            <div class="form-control-position">
                <i style="cursor: pointer" onclick="ShowPassMe()" class="icon-eye"></i>
            </div>
<script>     
    tgpass=false;
    function ShowPassMe(){ 
       ps=$("#password_login_form").val();
       $("#password_login_form").remove();  
       if (tgpass==false){
         $("#input_pass_div").html('<input type="text" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
         tgpass=!tgpass;
       } else {
           tgpass=!tgpass;
           $("#input_pass_div").html('<input type="password" id="password_login_form" class="form-control input-shadow" placeholder="Пароль">');
       };
       $("#password_login_form").val(ps);
    };    
</script>
WEB

Прогрессбар на vue.js

Комментариев нет

Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
    <table id="hotels_list"></table>
    <div id="hotels_pager"></div>  
    <div id="app">
        <div class="container">
            <div class="row">
                    <div class="col-6">      
                        <persent v-bind:msg="pers1"></persent>
                    </div>
                    <div class="col-6">    
                        <persent v-bind:msg="pers2"></persent>
                    </div>                
            </div>    
        </div>                
    </div>
<script>    
Vue.component('persent', {
    props: ['msg'],
    template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});      
var app = new Vue({
  el: '#app',
  data: {
    timing: null,
    pers1 : {
        value: 10,
        txt:'Добавление новых',
        style:'width:20%'
    },
    pers2 : {
        value: 70,
        txt:'Обновление',
        style:'width:70%'
    }
  },
  mounted(){
    console.log("-загрузились полностью..");  
    this.runTiming();
  },
  methods: {
      runTiming() {
        this.timing = setInterval(this.changeCurrentPers, 2000)          
      },
      changeCurrentPers(){
         vl=this;
        $.post('progress.txt',{}, function(data){                          
                vl.pers1.value=data;
                vl.pers1.style='width:'+data+'%';
        });       
        $.post('progress_update.txt',{}, function(data){
                vl.pers2.value=data;
                vl.pers2.style='width:'+data+'%';
        });                 
      }
  },  
});

Всё ищу, гдеб его (VUE.js)  можно применить.. Пока выходит «надумано»..

WEB

Пробую Vue.js

Комментариев нет

Ниже писал как тестировал React.js, в итоге не привилось от слова совсем. Всё надумано и усложнено.  Для реализации элементарных вещей типа вывода динамического списка загруженного из вне требуются феерические велосипеды. В итоге не смог придумать ни одного примера использования где было бы проще и удобнее чем с использованием чистого javascript + jquery. Теперь задумался в сторону фреймворка Vue.js В нём понравилась идея компонентности (кирпичиков из «своих» тегов) для создания страницы. Пока тестировал, получился вот такой скриптик, демонстрирующий базовые возможности:

<!doctype html>
<head>		
        <meta charset="UTF-8">
        <title>VUE.js test</title>		
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
<div id="app">
  {{ message }}
  <span v-bind:title="title">Hello</span>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>      
  </ol>    
  <button v-on:click="addItem">Добавить элемент</button>
  <input v-model="message">
  <brick></brick>
  <brick></brick>
</div>        
<script>   
Vue.component('brick', {
    template: '<div>Это кирпичик</div>'
});    
var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет'+ new Date().toLocaleString(),
    title: 'title me'+ new Date().toLocaleString(),
    msg:"DDD",
    todos:[
        {text:'Один',key:"wedwe"},
        {text:'Два'},
        {text:'Три'}
    ]
  },
  methods: {
        addItem: function () {
          this.todos.push({text: this.message});
        }
  },  
});    

</script>    
</body>
</html>

Демо тут